jQuery为类元素绑定change事件：如何避免重复代码并定位触发元素？

你完全不用逐个通过索引重复写代码！jQuery的类选择器本身就可以一次性给所有匹配的元素绑定事件，而且我们可以通过$(this)来精准获取当前触发事件的元素，避免全局取值的问题。

优化后的实现方式 #

直接给.ctaskSelector类选择器绑定change事件，事件处理函数里用$(this)指代当前触发事件的那个元素，不管有多少个同类型元素，都会自动生效：

var taskData = new Array;
$(".ctaskSelector").on('change', function () {
    // 获取当前触发事件的元素的值
    var val = $(this).val();
    // 从taskData中获取对应task_ID
    var task_ID = taskData[val].task_ID;
    // 后续逻辑...
});

为什么这个方案更合理？ #

• 告别重复代码：不用为每个元素索引单独写绑定逻辑，一次绑定覆盖所有匹配元素
• 取值精准无误：$(this)确保拿到的是当前触发事件的元素的值，不会因为页面存在多个同类型元素而取错
• 兼容动态元素：如果后续通过JS动态添加新的.ctaskSelector元素，改用事件委托的写法$(document).on('change', '.ctaskSelector', function(){...})，新元素也能自动继承事件逻辑

原代码的问题点 #

原代码里$($( ".ctaskSelector" )[0])只给第一个匹配元素绑定了事件，而且取值时用$(".ctaskSelector").val()会默认取第一个元素的值，不是触发事件的那个元素的值，在多元素场景下会出现逻辑错误。

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