Блог

 Html Code:

<div class="container w-80 h-96 bg-gray-100 shadow-lg rounded-lg">
  <ul class="flex justify-center flex-col items-center cursor-pointer">
    <li class="option w-full flex justify-center items-center h-10 hover:bg-gray-200">Apples</li>
     <li class="option w-full flex justify-center items-center h-10 hover:bg-gray-200">Oranges</li>
    <li class="option w-full flex justify-center items-center h-10 hover:bg-gray-200">Mangoes</li>
    <li class="option flex justify-center items-center h-10 w-full hover:bg-gray-200">Banana</li>
  </ul>
</div>

JQuery Code:

$('li').click((e) => {
  e.stopPropagation()
  console.log("li clicked")
  $('li.bg-blue-300').removeClass("bg-blue-300")
  $(this).addClass("bg-blue-300")
})
 

Вот ссылка на мое кодовое перо:
https://codepen.io/shivakumarjakkani/pen/QWvjZdw
Я пытаюсь добавить определенный класс в элемент li в событии click с помощью jquery. Я вижу, что происходит событие щелчка, но класс не применяется к указанному элементу. Как только элемент нажат, он должен стать синим цветом, указывающим на то, что элемент нажат, и ранее выбранный элемент должен быть снят с подсветки, что выполняется методом removeClass ().
Я вижу, что и addClass, и removeClass не работают.

Пожалуйста, помогите мне, что я здесь делаю не так.

Ваше здоровье.

Речь идет не о jQuery или попутном ветре — речь идет о функциях стрелок в Javascript и this контексте.

Как было указано здесь

…функции со стрелками этого не имеют. Если к нему есть доступ, он берется извне.

Поскольку функция стрелки не имеет a this , она использует родительскую this функцию . В вашем случае это объект окна, как указано @PaulT, и его решение будет работать.

Другой способ — не использовать функцию стрелки и заменить ее

 $('li').click(function(e) {
  e.stopPropagation()
  console.log("li clicked")
  $('li.bg-blue-300').removeClass("bg-blue-300")
  $(this).addClass("bg-blue-300")
})
 

Когда я вошел console.log($(this)) в систему , он показал объект window.

Так что вместо:

 $(this).addClass("bg-blue-300")
 

Вместо этого используйте цель события:

 $(e.target).addClass("bg-blue-300")
 

Попробуйте а console.log(e.target) , чтобы увидеть разницу.