通过单击具有相同类的元素返回子元素

Question

帮我解决这段代码，我试图为被点击按钮的子元素分配一个类，但是当我在任何一个按钮上触发点击事件时，该类被分配给所有按钮子元素。我已经编写了 jquery 代码它在下面提到了它的工作原理，但是当我双击其中一个按钮时它会起作用，并且 javascript 代码在控制台中起作用但在我的 js 中不起作用，html 文件中我有 js 代码块在$(document).ready(function(){});起作用。我需要帮助！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代码：$(.p-emote).on('click', ()=>{    var c = $(this).children('i');    $(c).toggleClass('interacted');});

Answer 1

通过将事件对象传递到回调中来使用事件目标（事件是点击，目标是被点击的特定元素）。

$('.p-emote').on('click', (event)=>{

    var c = $(event.target).children('i');

    $(c).toggleClass('interacted');

});

编辑：其他答案正确地指出您需要在选择器名称周围加上引号（'.p-remote'）

https://api.jquery.com/event.target/

Answer 2

您在选择器周围缺少单引号，并且也不使用箭头函数，因为它改变了您将 $(this) 引用到 window 对象的方式。如果您将其切换回类似于以下代码的内容，您将看到您的孩子。干杯。

$('.p-emote').on('click', function () {

  var c = $(this).children('i');

  console.log($(this).children('i'));

  $(c).toggleClass('interacted');

});