0

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

<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标签都默认为白色背景，单击时会显示图像。

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

同样，我需要更改所有后续li标签“停用”它们，删除背景图像（如果有），当用户 - 例如 - 第一次点击_20mb然后点击返回时_7mb。

4

4 回答 4

1

使用 jquery 选择所有以前的兄弟姐妹并将它们添加 css 类：

$("li").on('click', function(){
  $('li').removeClass('red');
  $(this).addClass('red');
  $(this).prevAll().addClass('red');
})
于 2013-04-29T21:51:39.293 回答
0

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

如果你想使用一个 jQuery 对象，你可以调用.prev()被点击的元素来获取上一个兄弟。您将不得不.prev()再次调用该兄弟姐妹，依此类推才能获得所有以前的兄弟姐妹。或者您可以使用.prevAll()获取所有以前的兄弟姐妹。

您的代码可能如下所示：

$(li).click(function(){
  $(this).addClass('clicked');
  $(this).siblings().removeClass('clicked');
  $(this).prevAll().changeButton();
});
于 2013-04-29T21:45:57.927 回答
0 
$('li').click(function() {
  $(this).addClass('activated');
  $(this).prevAll().addClass('activated');
  $(this).nextAll().removeClass('activated');
}
于 2013-04-29T21:59:04.903 回答
0 
$('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/

于 2013-04-29T22:35:46.700 回答