Question

用这段代码帮助我，我正在尝试为单击按钮的子元素分配一个类，但是当我在任何一个按钮上触发click事件时，该类将分配给所有按钮的子元素。下面提到的它的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）的方式。如果将其切换回类似下面的代码，您将看到自己的孩子。干杯。

$('.p-emote').on('click', function () {
  var c = $(this).children('i');
  console.log($(this).children('i'));
  $(c).toggleClass('interacted');
});

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

2 个答案: