Question

我有一个有prev＆amp;的画廊。 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

你正试图这样做吗？我在gallery 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>

单击jQuery shift列表项

1 个答案: