<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Chicago</li>
</ul>
我首先通过设置click函数来选择列表项。唯一的问题是它会选择每一个。我可以使用eq()
方法,但这不允许我在每次单击按钮时选择每个下一个列表项。我尝试了next()
方法,它确实选择了下一项,但我的问题是,“我如何在单击按钮时选择第一个列表项,然后在下一次单击后选择下一个列表项,依此类推。
$('button').click(function(){
$('ul li').css("color", "red");
});
发布于 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>
发布于 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
是否已经填充。
发布于 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>
https://stackoverflow.com/questions/50659649
复制相似问题