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

Question

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")
})

这是link给我的码笔：
https://codepen.io/shivakumarjakkani/pen/QWvjZdw
我正在尝试使用 jquery 在点击事件的 li 元素上添加特定的 class。我可以看到单击事件正在发生，但 class 未应用于指定的元素。单击该项目后，它应变为蓝色，表示该项目已被单击，之前选择的项目应取消突出显示，这是通过 removeClass() 方法完成的。
我看到 addClass 和 removeClass 都不起作用。

请帮我看看我做错了什么。

干杯。

Answer 1

当我登录 console.log($(this)) 时，它显示了一个 window 对象。

所以代替：

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

改为使用事件的目标：

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

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

Answer 2

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

正如所指出的那样here

...arrow functions do not have this. If this is accessed, it is taken from the outside.

因为箭头函数没有 this，所以它使用父级的 this。在您的情况下，它是@PaulT 指出的 window 对象，他的解决方案将起作用。

另一种方法-不使用箭头函数并将其替换为

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

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

Jquery Unable apply a tailwind class using addclass on list items also removeClass does not work

jquery

tailwind-css

codepen