jquery - 使用单击事件将多个类更改为多个 li

Question

我尝试进行一些搜索，但我不知道如何做我需要的。

<ul>
  <li class="_0mb"></li>
  <li class="_3mb"></li>
  <li class="_7mb"></li>
  <li class="_14mb"></li>
  <li class="_20mb"></li>
  <li class="oltre_20mb"></li>
</ul>

我需要做的是让用户能够在点击这些 li 标签之一的不同过滤器之间切换，这将根据用户点击的位置触发不同的背景。每个 li 标签都有默认的白色背景和点击时的图像。

我知道如何使用 .addClass 和 .removeClass 操作类，但我需要将类都更改为用户单击的 li在前面的所有 li 标签上“激活”更改背景图像的按钮(例如，如果用户单击 _7mb 我也需要将背景更改为_3mb 和 0_mb)，我不知道该怎么做。

同样，我需要更改所有后续 li 标签“停用”它们，删除背景图片(如果有)，当用户 - 例如 - 首次点击 _20mb 然后单击返回 _7mb。

Answer 1

使用 jquery 选择所有 previous sibling 姐妹并添加它们的 css 类:

$("li").on('click', function(){
  $('li').removeClass('red');
  $(this).addClass('red');
  $(this).prevAll().addClass('red');
})