點擊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>