Question

我正在尝试制作一个只能同时显示3个div的功能，当用户点击下一个时它将显示下一个3.前一个按钮需要显示前3个div。 Div由用户自动创建。当他们输入输入字段时，将决定要创建多少个div。

Divs就是这样创建的

document.getElementById('dropoptions').addEventListener('input', function () 
  {
    var select = $('#dropoptions').val();
    var number = $('input').val(); 
    $('.result').remove();
    for (var i = 0; i < number ; i++) {
    container.innerHTML += `<div class="result">${select}</div>`; 
  }
});

这个功能一次只能显示3个div，但是当我点击右边（显示下一个）时，它们都会消失。

$("#container .result").slice(0,3).show(); 
    $("#right").click(function(e) {

    var items = $('#container .result:visible').hide().last();

    var nextItems = result.nextAll().slice(0, 3);

      if (nextItems.length === 1) {
        nextItems = $("#container .result").slice(-3);
    } 

     if (nextItems.length === 0) {
        nextItems = $("#container .result").slice(0, 3);
    } 

    nextItems.show();

    e.preventDefault();
});

我该如何解决？

Answer 1

问题是您使用result代替items来定位下一个元素。请改用以下内容：

$("#container .result").slice(0,3).show(); 
$("#right").click(function(e) {

    var items = $('#container .result:visible').hide().last();

    var nextItems = items.nextAll().slice(0, 3);

    if (nextItems.length === 1) {
        nextItems = $("#container .result").slice(-3);
    } 

    if (nextItems.length === 0) {
        nextItems = $("#container .result").slice(0, 3);
    } 

    nextItems.show();

    e.preventDefault();
});

Working Fiddle

一次只显示三个Div

1 个答案: