Question

我有一个无序列表用作播放视频部分的菜单。通过向其添加类并从任何其他列表项中删除该类时，正在播放的列表项（视频部分）突出显示。客户端已经要求我更改此项，以便在单击某个项目时，也会选择先前的列表项。即，如果单击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>

Answer 1

你可以

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

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

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

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

5）删除选定的课程

＆＃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;

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

1 个答案: