将类添加到当前和以前的列表项

时间:2016-07-13 10:38:26

标签: javascript jquery

我有一个无序列表用作播放视频部分的菜单。通过向其添加类并从任何其他列表项中删除该类时,正在播放的列表项(视频部分)突出显示。客户端已经要求我更改此项,以便在单击某个项目时,也会选择先前的列表项。即,如果单击Vid 2,则Vid 1和Start将被赋予'selected'类以及Vid 2.单击Vid 3,将突出显示Vid 3,Vid 2,Vid 1,Start等等。

我还想从所单击项目之前的任何列表项中删除所选类。例如,如果选择Vid 4并且用户单击Vid 2,则从Vid 4和Vid 2中移除所选类,Vid 1和Start选择该类。对不起,如果这些事情没有任何意义,请提前感谢。

$("#select li a").click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');
});
#video-controls ul li {
	cursor: pointer;
}

#video-controls ul li a {
	color: #5f6a72;
	text-decoration: none;
	display: block;
}

#video-controls ul li.selected,
#video-controls ul li.selected a {
	color: #00aad2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<nav id="video-controls">
  <ul id="select">
    <li id="start"><a href="#/">Start</a></li>
    <li id="vid-1"><a href="#/">Vid 1</a></li>
    <li id="vid-2"><a href="#/">Vid 2</a></li>
    <li id="vid-3"><a href="#/">Vid 3</a></li>
    <li id="vid-4"><a href="#/">Vid 4</a></li>
  </ul>
</nav>

1 个答案:

答案 0 :(得分:2)

你可以

1)遍历并获取所有先前的元素。

2)使用.andSelf()添加点击的对象父

3)将选定的类添加到上面返回的所有元素。

4)在步骤2中找到除了返回元素之外的剩余兄弟

5)删除选定的课程

&#13;
&#13;
$("#select li a").click(function() {
 $(this).parent().prevAll().andSelf().addClass('selected').filter(':last').nextAll().removeClass('selected');
});
&#13;
#video-controls ul li {
	cursor: pointer;
}

#video-controls ul li a {
	color: #5f6a72;
	text-decoration: none;
	display: block;
}

#video-controls ul li.selected,
#video-controls ul li.selected a {
	color: #00aad2;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<nav id="video-controls">
  <ul id="select">
    <li id="start"><a href="#/">Start</a></li>
    <li id="vid-1"><a href="#/">Vid 1</a></li>
    <li id="vid-2"><a href="#/">Vid 2</a></li>
    <li id="vid-3"><a href="#/">Vid 3</a></li>
    <li id="vid-4"><a href="#/">Vid 4</a></li>
  </ul>
</nav>
&#13;
&#13;
&#13;