當用戶單擊按鈕時，如何獲取按鈕的值？

Question

我有四個按鈕：

<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>

我想捕獲單擊的按鈕的值，以便我稍后可以將它與另一個按鈕一起添加並將它們添加在一起。

我為 JS 添加了這個：

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

我讀到我可能需要使用 .attr 來代替，但不確定如何向按鈕添加自定義屬性？

Answer 1

首先，你應該使用一個類，而不是一個 ID。 ID 應該是唯一的，並且$("#button-yardSize")只會選擇第一個按鈕。

在事件偵聽器中，您可以使用this來引用被單擊的按鈕。

您需要在函數內分配inputYardSize變量。 .on()只返回您將處理程序綁定到的 jQuery 對象，而不是函數內部的值。

 $(".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>

Answer 2

編輯：您應該對唯一元素使用 ID，對重復元素使用類。

因此，如果您要用按鈕上的類替換 ID，代碼應如下所示：

從一開始就刪除聲明，而是使用它來存儲 click 函數內的值。

這樣，您將擁有具有指定類的單擊按鈕的值。

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

Answer 3

每個元素的id必須是唯一的

<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>

JS 函數不正確，您需要一個單擊處理程序來記錄按鈕值

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