javascript - 一次只显示三个 Div

Question

我正在尝试制作一个一次只显示 3 个 div 的功能，当用户单击下一步时，它将显示下一个 3。上一个按钮需要显示前 3 个 div。 Div 由用户自动创建。当他们在输入字段中键入内容时，系统会决定要创建多少个 div。

div 是这样创建的

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