jQuery插件点击div盒子时无法正确为对应.dot元素添加类的问题

嘿，这个问题我太熟悉了！大概率是你在插件的点击事件处理里，没有正确限定查找.dot元素的范围，导致选中了页面上所有的.dot，最后一个（也就是第二个盒子里的）被错误触发了。

问题根源 #

举个例子，如果你的插件里写了类似这样的代码：

$('.your-box-class').on('click', function() {
  $('.dot').addClass('haya'); // 这里会选中页面上所有的.dot元素
});

这种写法会全局查找所有.dot，当多个盒子存在时，要么所有.dot都会被加类，要么因为执行顺序问题，你看到的是第二个盒子的元素被修改，但这显然不是你想要的效果。

修复方案 #

你需要把查找范围限定在当前被点击的盒子内部，用$(this)来指向当前触发点击事件的盒子元素，再用.find()方法在它的后代里找.dot：

$('.your-box-class').on('click', function() {
  $(this).find('.dot').addClass('haya'); // 只操作当前盒子里的.dot
});

• $(this)：在点击事件的回调里，它就是你刚点击的那个盒子div
• .find('.dot')：只会在这个盒子的子元素、孙元素里查找.dot，完全不会影响其他盒子里的元素

如果你的插件是基于模板开发的，还要注意插件内部的上下文绑定，确保事件回调里的this确实指向当前的盒子元素，而不是插件的实例或者其他全局对象。

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