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);
});

当用户单击按钮时，如何获得按钮的值？

3 个答案: