点击同class按钮时仅为当前按钮子元素切换类的jQuery问题求助

看起来你遇到的核心问题是箭头函数导致的this指向错误，以及事件绑定的逻辑偏差，下面一步步给你拆解和修正：

为什么原来的代码会出问题？ #

1. 箭头函数的this不指向当前按钮：
   你用了箭头函数作为点击事件的回调，但箭头函数没有自己的this，它会继承外层作用域的this。在$(document).ready()里，外层this是document对象，所以$(this)指向的是整个文档，而不是你点击的那个按钮。这就导致$(this).children('i')根本找不到正确的元素，甚至可能因为意外情况触发了所有按钮的子元素变化。
2. 双击生效的假象：
   因为this指向错误，toggleClass没有正确作用在目标元素上，多次点击后可能因为浏览器事件队列或重复绑定的问题，才偶然触发了预期效果，并不是真的需要双击。
3. ready函数里无效的原因：
   不是ready函数本身无效，而是箭头函数导致逻辑错误，换成普通函数后，就能在DOM加载完成后正确绑定事件了。

修正后的代码 #

直接把箭头函数换成普通函数，让this正确指向当前点击的按钮：

HTML（保持不变）

<div class="interact-Box"> 
<button class="p-emote"><i class="fas fa-thumb"></i></button> 
<button class="p-emote"><i class="fas fa-thumb"></i></button> 
<button class="p-emote"><i class="fas fa-thumb"></i></button> 
<button class="p-emote"><i class="fas fa-thumb"></i></button> 
</div>

JavaScript

$(document).ready(function() {
  // 给每个.p-emote按钮绑定点击事件
  $('.p-emote').on('click', function() {
    // this就是当前点击的按钮，找到它的子元素i并切换类
    $(this).children('i').toggleClass('interacted');
  });
});

进阶优化：事件委托（适合动态生成按钮的场景） #

如果你的按钮是后续通过JS动态添加到页面的，上面的直接绑定方式会失效，这时候用事件委托更可靠：

$(function() {
  // 把事件绑定到父容器上，委托给.p-emote按钮
  $('.interact-Box').on('click', '.p-emote', function() {
    $(this).find('i').toggleClass('interacted');
  });
});

这样不管后续新增多少个.p-emote按钮，点击事件都能正常生效。

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