使用jQuery跟踪按钮点击：制作简易计算器时按钮取值异常求助

嘿，我完全懂你遇到的困扰——不管点哪个name="numbers"的按钮，页面都只显示第一个按钮的值（比如1）对吧？这大概率是因为你在绑定点击事件的时候，没正确获取当前被点击的那个按钮，反而不小心取到了选择器匹配的第一个元素。

先来看看你可能踩的坑：比如你可能写了类似这样的错误代码：

$('input[name="numbers"]').click(function() {
  // 这里错了！每次都会取第一个匹配的按钮的值
  var value = $('input[name="numbers"]').val();
  $('#field').val($('#field').val() + value);
});

或者如果是循环生成按钮的场景，没处理闭包问题，导致变量一直指向第一个元素。

正确的解决思路：用$(this)获取当前点击的元素 #

当按钮被点击时，this会直接指向触发事件的那个DOM按钮，把它转成jQuery对象$(this)后，再取val()就是当前按钮的正确值了。

给你写个完整的正确示例：

<html>
<head>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script>
    $(document).ready(function() {
      // 给所有name为numbers的按钮绑定点击事件
      $('input[name="numbers"]').click(function() {
        // 重点：用$(this)获取当前点击的按钮
        var clickedValue = $(this).val();
        // 将值追加到输入框中
        $('#field').val($('#field').val() + clickedValue);
      });
    });
  </script>
</head>
<body>
  <div>
    <input id="field" type="text"/>
    <!-- 示例数字按钮 -->
    <input type="button" name="numbers" value="1"/>
    <input type="button" name="numbers" value="2"/>
    <input type="button" name="numbers" value="3"/>
    <input type="button" name="numbers" value="4"/>
  </div>
</body>
</html>

如果你的按钮是动态生成的（比如用JS循环创建的），那推荐用事件委托来绑定，这样新生成的按钮也能正常响应点击：

$(document).on('click', 'input[name="numbers"]', function() {
  var clickedValue = $(this).val();
  $('#field').val($('#field').val() + clickedValue);
});

总结一下：核心就是在事件处理函数里用$(this)指代当前触发事件的按钮，而不是重新用选择器去查询所有按钮（那样默认会取第一个匹配项）。

内容的提问来源于stack exchange，提问作者damirqasha