如何使用Jquery或Javascript按顺序单击每个按钮来选择每个<li>
如何使用Jquery或Javascript按顺序单击每个按钮来选择每个<li>
提问于 2018-06-03 01:53:55
<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
</ul>我首先通过设置click函数来选择列表项。唯一的问题是它会选择每一个。我可以使用eq()方法，但这不允许我在每次单击按钮时选择每个下一个列表项。我尝试了next()方法，它确实选择了下一项，但我的问题是，“我如何在单击按钮时选择第一个列表项，然后在下一次单击后选择下一个列表项，依此类推。
$('button').click(function(){
$('ul li').css("color", "red");
});回答 4
Stack Overflow用户
发布于 2018-06-03 02:11:51
添加所选的类大约是最简单的，然后可以遍历到next()或first()，具体取决于当前所选的类是否位于组中的最后一个
$('button').click(function() {
var $items = $('li'),
$selected = $items.filter('.selected').removeClass('selected'),
$next;
// first time only when no selected exists, remove if you automatically select first one
if (!$selected.length) {
$next = $items.first();
} else {
$next = $selected.is($items.last()) ? $items.first() : $selected.next();
}
$next.addClass('selected')
});.selected {
color: red
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
</ul>
<button>Toggle selections</button>
Stack Overflow用户
发布于 2018-06-03 02:11:35
你需要清点一下。所以，你应该有一个单独的变量来验证这是第一次点击。如果是第一次单击，我们选择.eq(0)或.first()。如果不是，则始终选择.next()。
让我们在您的示例中看看这在实践中是如何工作的。HTML将保持不变，而JS将发生变化：
var alreadyClicked = false;
var selectedElement;
$('ul li').on('click', function() {
if (alreadyClicked) {
selectedElement = selectedElement.next();
} else {
alreadyClicked = true;
selectedElement = $('ul li').first();
}
selectedElement.css('color', 'red');
});<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
</ul>
<script src="https://code.jquery.com/jquery-git.js"></script>
如您所见，我们在alreadyClicked布尔值中保持计数。如果为false，我们将选择第一个元素，否则，我们总是向上移动一个元素。
此外，我们可以通过完全删除alreadyClicked来改进代码，只检查selectedElement是否已经填充。
Stack Overflow用户
发布于 2018-06-03 02:13:51
在我的头顶，你可以添加一个class，当你点击你的按钮时，你可以引用它。
$('button').click(function() {
var selectedItem = null;
if($('.is-selected').length) {
if (!$('.is-selected').is('li:last')) {
selectedItem = $('.is-selected').next();
}
$('.is-selected').removeClass('is-selected');
}
if (!selectedItem) {
selectedItem = $('ul').children().first();
}
selectedItem.addClass('is-selected');
});.is-selected {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
</ul>
<button type='button'>Click Me!</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659649
复制相关文章
相似问题