如何让jQuery仅对被点击的同class类名元素生效？

嘿，看起来你遇到的情况有点反常——其实你给出的代码里已经用到了$(this)，按jQuery的默认逻辑，这个$(this)就是触发点击事件的那个具体元素，理论上这段代码应该只会修改当前被点击的.editorTile的data属性，不会影响其他同class的元素。不过如果实际运行中还是出现所有元素都受影响的情况，我们可以从这几个方向排查优化：

1. 先确认$(this)的指向是不是正确的 #

你可以在回调函数里加个控制台日志，直观看看当前操作的元素是不是你点击的那个：

$('.editorTile').click(function(event){
  // 打印当前点击的元素，在浏览器控制台就能看到
  console.log('我点的是:', this);
  $(this).data('type', selectedTile);
  $(this).data('imgx', selectedTile_imgX);
  $(this).data('imgy', selectedTile_imgY);
});

打开浏览器的开发者工具（按F12），点击不同的.editorTile，看看控制台打印的元素是不是你当前点击的那个。如果是，那说明data的修改已经是只针对这个元素了，可能是你后续使用这些data的代码出了问题。

2. 别误写全局选择器 #

如果你的代码里不小心把$(this)写成了$('.editorTile')，那肯定会修改所有同class元素的data——不过你现在的代码里没犯这个错，但可以再检查一遍：

错误示例（会修改所有元素）：

$('.editorTile').click(function(event){
  // 这里用了全局选择器，会选中所有.editorTile
  $('.editorTile').data('type', selectedTile);
});

正确的就是你原来的$(this)，只操作当前点击的元素。

3. 检查后续使用data的逻辑 #

如果确认修改data的代码没问题，但还是看起来所有元素都受影响，那大概率是你获取data的代码有问题。比如如果你在其他地方写了：

// 错误：获取所有.editorTile的data（实际只会取第一个匹配元素的值，但如果遍历所有元素用这个值就会出问题）
const currentType = $('.editorTile').data('type');

这种写法会拿到第一个.editorTile的data值，如果你的逻辑是把这个值应用到所有元素上，就会看起来像是所有元素都被修改了。正确的做法是只针对需要的单个元素获取data，比如在对应的事件回调里操作，或者通过选择器精准定位单个元素。

4. 可选：简化你的代码写法 #

你可以把多个$(this).data()调用合并成一个对象，代码更简洁，逻辑也更清晰：

$('.editorTile').click(function(event){
  $(this).data({
    type: selectedTile,
    imgx: selectedTile_imgX,
    imgy: selectedTile_imgY
  });
});

最后再提一句：如果你的HTML里.editorTile是嵌套的，可能会有事件冒泡，但冒泡只会触发父元素的事件，不会导致当前代码修改所有元素的data，所以这个不用太担心。

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