Question

我有6个div（虽然代码应该适用于任意数量的div）。我想在点击按钮divs时显示4 #more-projects。理想情况下，第一次单击#more-projects时会显示前4个div，再次单击时会隐藏所有div，然后显示下一个divs，这将是5并且6将与1和2一起。每当点击#more-projects时，将显示下四个divs。以下是我的方法，但我不知道如何进步

$('#more-projects').on('click', function() {
    var projects = [];
    var shown = [];
    var start = [];

    $('.thumbnail-cnt').each(function(i) {
        projects.push($(this).data('num'));
    })
    var shown = projects.slice(0,4);
    $('[data-num="' + shown.join('"], [data-id="') + '"]').addClass('visible');

});

.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<div class="thumbnail-cnt" data-num="1">
</div>
<div class="thumbnail-cnt" data-num="2">
</div>
<div class="thumbnail-cnt" data-num="3">
</div>
<div class="thumbnail-cnt" data-num="4">
</div>
<div class="thumbnail-cnt" data-num="5">
</div>
<div class="thumbnail-cnt" data-num="6">
</div>

<button id="more-projects">
</button>

从这里开始，我要对要显示的项目进行切片，添加类.visible并在数组中创建一个var的变量，该变量应该是接下来的4个项目的起点。但我不知道如何实现这个循环回到数组的开始。任何帮助将不胜感激。

Answer 1

请检查此代码

<强> HTML

else if both A[3] and B[3] are same then 
  the unisigned comparator module has to be written here.

<强> JS

<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>

<强> CSS

$(document).ready(function(){
   var divQueue = [];

   $("#container div").each(function(){
        divQueue.push($(this));
   });

   function showDivs(){
     $("#container").html('');
     $(".thumbnail-cnt").css("display","none");
     var i=0;
     while(i<4){
        var temp = divQueue[0];
        $("#container").append(temp[0]);
        divQueue.shift();
        divQueue.push(temp);
        i++; 
     }
   }

   showDivs();

   $("#more-projects").click(function(){
   showDivs();
   });
});

请参阅Fiddle

Answer 2

我会尝试为每个div分配一个id，例如：

<div class="thumbnail-cnt" id="div1" data-num="1">
</div>
<div class="thumbnail-cnt" id="div2" data-num="2">
</div>
<div class="thumbnail-cnt" id="div3" data-num="3">
</div>
<div class="thumbnail-cnt" id="div4" data-num="4">
</div>
<div class="thumbnail-cnt" id="div5" data-num="5">
</div>

如果您使用的是Jquery，可以使用方法hide()和show()

如果你想要显示X divs：

for(var i = 1; i < X; i ++){
  $('#div'+i).show();
}    
for(var i = X; i < numDivs; i ++){
  $('#div'+i).hide();
}

Answer 3

使用var divs = []; $('.thumbnail-cnt').each(function() { divs['' + $(this).index() + ''] = $(this).data('num'); divs.push($(this).text()); }); divs.splice(0, 1); $('#more-projects').on('click', function() { $('.thumbnail-cnt').hide(); var count = 0; $(divs).each(function(k, v) { if (count == 4) return false; $('.thumbnail-cnt[data-num="' + v + '"]').show(); divs.push(divs.shift()); count++; }); });设法旋转div。检查这是否是您要找的：

.thumbnail-cnt {
  display: none;
}

.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail-cnt" data-num=1>Test 1</div>
<div class="thumbnail-cnt" data-num=2>Test 2</div>
<div class="thumbnail-cnt" data-num=3>Test 3</div>
<div class="thumbnail-cnt" data-num=4>Test 4</div>
<div class="thumbnail-cnt" data-num=5>Test 5</div>
<div class="thumbnail-cnt" data-num=6>Test 6</div>
<div class="thumbnail-cnt" data-num=7>Test 7</div>
<div class="thumbnail-cnt" data-num=8>Test 8</div>
<div class="thumbnail-cnt" data-num=9>Test 9</div>
<button id="more-projects">More</button>

$value = $_POST;
print_r($value);

显示数组中的某些元素

3 个答案: