我在滑块中有一个图像列表,如下所示:
<ul>
<li class="dd">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
有一个按钮删除<li>
类"dd",所以我有这个功能继续:
function delete(){
$('li.dd').remove();
}
所以现在特定的<li>
被删除了,我想要类"dd"被添加到我当前在的<li>
上。我试着添加这个:
function delete(){
$('li.dd').remove();
$('li').addClass(' dd')
}
但是正如您所看到的,它所做的只是将类添加到所有现有的<li>
s中,这意味着如果我再次选择单击删除按钮,整个列表将被删除。
我有一支笔正在写我所拥有的:
http://codepen.io/anon/pen/gpNwGp提前感谢!
因为你添加类的所有元素,所有的li
s将被删除在下一次点击。您可以使用以下方法将类只添加到第一个 li
。
您可以使用:first
伪选择器来选择第一个元素。
function delete() {
$('li.dd').remove();
$('li:first').addClass('dd');
// ^^^^^^
}
你也可以使用first()
来获取第一个元素
function delete() {
$('li.dd').remove();
$('li').first().addClass('dd');
// ^^^^^^^^
}
可以查看更新后的codepen Demo
您可以使用jQuery方法使其更干净
function toggleSlide(direction) {
var $visible = $('.slider > li:visible').hide();
var $ft = $visible[direction ? 'next' : 'prev']();
if (!$ft.length) {
$ft = $('.slider > li')[direction ? 'first' : 'last']();
}
$ft.show();
setIndex();
}
function getVisible() {
return $('.slider > li:visible').index() + 1;
}
function goToEdge(where) {
$('.slider > li:visible').hide();
$('.slider > li')[where ? 'last' : 'first']().show();
setIndex();
}
function addSlide() {
$('ul.slider').append('<li class="hideable"><img src="http://placehold.it/700x100" alt="Sunset" /></li>');
}
function deleteSlide() {
var $visible = $('.slider > li:visible');
toggleSlide(true);
$visible.remove();
}
function setIndex() {
$('#slideNumber').text(getVisible())
}
setIndex();
.hideable {
display: none;
}
img {
width: 640px;
height: 480px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slider" style="list-style-type:none; margin-left:-2em;">
<li class="hideable dd" style="display: block;">
<img src="http://placehold.it/100x100" alt="hinterground" />
</li>
<li class="hideable">
<img src="http://placehold.it/200x100" alt="Berries" />
</li>
<li class="hideable">
<img src="http://placehold.it/300x100" alt="Cheetah" />
</li>
<li class="hideable">
<img src="http://placehold.it/400x100" alt="Fence" />
</li>
<li class="hideable">
<img src="http://placehold.it/500x100" alt="Paper" />
</li>
<li class="hideable">
<img src="http://placehold.it/600x100" alt="Sunset" />
</li>
<!-- ... and so on -->
</ul>
<!-- Buttons to go back and forth between slides. -->
<form>
<input type="button" id="firstButton" value="First" onclick="goToEdge(false)" />
<input type="button" value="Back" onclick="toggleSlide(false)" />
<input type="button" value="Forward" onclick="toggleSlide(true)" />
<input type="button" id="lastButton" value="Last" onclick="goToEdge(true)" />
<input type="button" value="Add Slide" onclick="addSlide()" />
<input type="button" value="Delete Slide" onclick="deleteSlide()" />
<p>Slide
<!-- you can change "Slide" to Page, Item, etc. --> <span id="slideNumber">
</span>
</p>
</form>
先保存下一个元素来添加class:
function delete(which) {
var next_li = $('li.dd').next();
$('li.dd').remove();
next_li.addClass("dd");
}
我想这可能对你有帮助。好运。
回忆!不要使用.first()
,因为它提供了第一个dd
类。