我有一个无序列表用作播放视频部分的菜单。通过向其添加类并从任何其他列表项中删除该类时,正在播放的列表项(视频部分)突出显示。客户端已经要求我更改此项,以便在单击某个项目时,也会选择先前的列表项。即,如果单击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>
答案 0 :(得分:2)
你可以
1)遍历并获取所有先前的元素。
2)使用.andSelf()
添加点击的对象父
3)将选定的类添加到上面返回的所有元素。
4)在步骤2中找到除了返回元素之外的剩余兄弟
5)删除选定的课程
$("#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;