Ich habe vier Tasten:

<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>

Und ich möchte den Wert der angeklickten Schaltfläche erfassen, damit ich sie später mit einer anderen Schaltfläche hinzufügen und zusammenfügen kann.

Ich habe dies für die JS hinzugefügt:

var inputYardSize = $("#button-yardSize").on("click", function(){
  $("#button-yardSize").val();
  console.log(inputYardSize);
});

Ich habe gelesen, dass ich stattdessen möglicherweise .attr verwenden muss, bin mir aber nicht sicher, wie ich den Schaltflächen ein benutzerdefiniertes Attribut hinzufügen soll?

-2
Torn 17 Jän. 2019 im 23:33

3 Antworten

Beste Antwort

Zunächst sollten Sie eine Klasse verwenden, keine ID. IDs sollten eindeutig sein und $("#button-yardSize") wählt nur die erste Schaltfläche aus.

Im Ereignis-Listener können Sie mit this auf die Schaltfläche verweisen, auf die geklickt wurde.

Sie müssen die Variable inputYardSize innerhalb der Funktion zuweisen. .on() gibt nur das jQuery-Objekt zurück, an das Sie den Handler binden, nicht den Wert innerhalb der Funktion.

$(".button-yardSize").on("click", function() {
  var inputYardSize = $(this).val();
  console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
3
Barmar 17 Jän. 2019 im 20:41

Die ID jedes Elements muss eindeutig sein

<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>

Die JS-Funktion ist falsch. Sie benötigen einen Klick-Handler, der den Schaltflächenwert protokolliert

$("#button-yardSize1").on("click", function(){
       inputYardSize=$("#button-yardSize1").val();
       console.log(inputYardSize);
});
0
user1579234 17 Jän. 2019 im 20:43

BEARBEITEN: Sie sollten ID für eindeutige Elemente und Klasse zum Wiederholen von Elementen verwenden.

Wenn Sie also die ID durch die Klasse auf der Schaltfläche ersetzen würden, sollte der Code folgendermaßen aussehen:

Entfernen Sie die Deklaration von Anfang an und verwenden Sie sie stattdessen, um die Werte in der Klickfunktion zu speichern.

Auf diese Weise erhalten Sie den Wert der angeklickten Schaltfläche mit der angegebenen Klasse.

$('.button-yardSize').on('click', function(){
    var inputYardSize = $(this).val();
    console.log(inputYardSize);
})
1
Patrik Alexits 17 Jän. 2019 im 20:38