Jquery 无法在列表项上使用 addclass 应用顺风类，removeClass 也不起作用

问题描述

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
我正在尝试使用 jquery 在单击事件的 li 元素上添加特定类。我可以看到 click 事件正在发生，但该类并未应用于指定的元素。单击该项目后，它应变为蓝色，表示该项目已被单击，并且应取消突出显示先前选定的项目，这是通过 removeClass() 方法完成的。
我看到 addClass 和 removeClass 都不起作用。

请帮助我我在这里做错了什么。

干杯。

解决方法

这与 jQuery 或 Tailwind 无关 - 与 Javascript 和 this 上下文中的箭头函数有关。

正如所指出的那样here

...箭头函数没有这个。如果这个被访问，它是从外部获取的。

因为箭头函数没有 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)) 时，它显示了一个窗口对象。

所以代替：

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

改为使用事件的目标：

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

试试 console.log(e.target) 看看有什么不同。

codepen jquery tailwind-css