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

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)=>{&nbsp; &nbsp; var c = $(event.target).children('i');&nbsp; &nbsp; $(c).toggleClass('interacted');});编辑：其他答案正确地指出您需要在选择器名称周围加上引号（'.p-remote'）https://api.jquery.com/event.target/

Answer 2

您在选择器周围缺少单引号，并且也不使用箭头函数，因为它改变了您将 $(this) 引用到 window 对象的方式。如果您将其切换回类似于以下代码的内容，您将看到您的孩子。干杯。$('.p-emote').on('click', function () {&nbsp; var c = $(this).children('i');&nbsp; console.log($(this).children('i'));&nbsp; $(c).toggleClass('interacted');});