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选择所有以前的兄弟姐妹并添加css类：

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

Answer 2

在DOM元素上，您可以使用.previousSiblings来获取用户点击的li元素之前的li元素。

如果要使用jQuery对象，可以在单击的元素上调用.prev()以获取上一个兄弟。您将不得不再次在该兄弟姐妹身上呼叫.prev()，以便获得所有以前的兄弟姐妹。或者您可以使用.prevAll()来获取所有以前的兄弟姐妹。

您的代码可能如下所示：

$(li).click(function(){
  $(this).addClass('clicked');
  $(this).siblings().removeClass('clicked');
  $(this).prevAll().changeButton();
});

Answer 3

$('li').click(function() {
  $(this).addClass('activated');
  $(this).prevAll().addClass('activated');
  $(this).nextAll().removeClass('activated');
}

Answer 4

$('li').click(function () {
    $(this).siblings().addBack(this).removeClass('activate notActive clicked');
    $(this).addClass('clicked').prevAll().addClass('activate').end().nextAll().addClass('notActive');
});

工作示例：http://jsfiddle.net/uHmda/

使用click事件将多个类更改为多个li

4 个答案: