jQuery实现为批量按钮绑定同一获取唯一值的函数

刚好碰到过类似需求！要给50个按钮绑定同一个点击事件，并且获取每个按钮独有的value值，用jQuery可以轻松实现，不用挨个给按钮写事件，直接通过类选择器统一处理就行，具体代码如下：

HTML 结构 #

先给所有需要绑定事件的按钮加上同一个类名（比如query），并给每个按钮设置唯一的value属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <button value="alabama" class="query">Alabama</button>
  <button value="alaska" class="query">Alaska</button>
  <!-- 剩下48个按钮都按这个格式写 -->
</div>

jQuery 事件绑定代码 #

等DOM加载完成后，通过类选择器给所有按钮绑定点击事件，在事件处理函数里用$(this)指代当前被点击的按钮，再获取它的value值：

$(document).ready(function() {
  $(".query").on("click", function() {
    // 这里的$(this)就是你当前点击的那个按钮元素
    var id = $(this).attr('value');
    // 也可以用$(this).val()，效果是一样的，后者是jQuery专门的表单值获取方法
    alert(id); // 弹出当前按钮的value值，你可以换成自己需要的业务逻辑
  })
});

关键知识点解释 #

• $(".query")：选中所有带有query类的按钮元素，一次性给它们绑定点击事件，不用重复写50次事件绑定代码
• $(this)：在事件处理函数内部，它指代的是当前被点击的那个按钮，这样就能精准获取到对应按钮的value值，不会和其他按钮搞混
• 获取value值的两种方式：$(this).attr('value') 和 $(this).val() 都能拿到结果，更推荐用val()，它是jQuery专门为表单元素设计的取值方法，兼容性更好

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