Возврат дочернего элемента путем нажатия на элементы с тем же классом

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

Вам не хватает одинарных кавычек вокруг вашего селектора, а также не используется функция стрелки, так как она меняет способ обращения к $ (this) в объекте окна. Если вы переключите его обратно на что-то вроде кода ниже, вы увидите своих детей. Ура.

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

Answer 2

Используйте цель события (событие - это щелчок, цель - конкретный элемент, по которому был выполнен щелчок), передав объект события в обратный вызов.

$('.p-emote').on('click', (event)=>{
    var c = $(event.target).children('i');
    $(c).toggleClass('interacted');
});

РЕДАКТИРОВАТЬ: другой ответ справедливо указывает на то, чтовам нужны кавычки вокруг имени селектора ('.p-remote')

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