点击jQuery移动列表项目

Question

我有一个画廊，有prev & next scrolls。

$(document).on('click', '.playlist-gallery > .prev', function() { 
    $('.playlist-item:first').appendTo(".playlist-gallery"); 
    $('.playlist-item:last').hide().show(); 
}); 

$(document).on('click', '.playlist-gallery > .next', function() { 
    $(".playlist-item:last").prependTo(".playlist-gallery"); 
    $(".playlist-item:first").hide().show(); 
}); 

这是为了删除第一个列表项，并发送到最后，或者反过来取决于所选的按钮。

我所看到的是当列表中只有两个项目时，上面的脚本只是保持重复。帮帮我？

Answer 1

你想要做这样的事吗？我在画廊div外面添加了按钮。我有3个项目的代码设置，但如果你删除一个它仍然适用于2就好了。祝你好运。

$(document).on('click', '.prev', function() { 
 
    $('.playlist-item:first').appendTo(".playlist-gallery"); 
 
    $('.playlist-item:last').hide().show(); 
 
}); 
 

 
$(document).on('click', '.next', function() { 
 
    $(".playlist-item:last").prependTo(".playlist-gallery"); 
 
    $(".playlist-item:first").hide().show(); 
 
});

.playlist-gallery { 
 
    background: #CCC; 
 
    height: 100px; 
 
} 
 

 
.playlist-item { 
 
    width: 100px;; 
 
    height: 100px; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    background: #FFF; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="prev">PREV</button> 
 
<button class="next">NEXT</button> 
 

 
<div class="playlist-gallery"> 
 
    <div class="playlist-item">1</div> 
 
    <div class="playlist-item">2</div> 
 
    <div class="playlist-item">3</div> 
 
</div>