jquery通過單擊div顯示更多結果

Question

我試圖從php搜索中顯示更多結果。基本頁面應顯示前五個結果，每次點擊「顯示更多結果」時，應彈出5個結果。下面的腳本完美地完成了第一部分（顯示前5個結果），但第二部分不起作用。我試過很多的選擇，但似乎並沒有得到它的工作，任何一個線索是怎麼回事錯

的jQuery：

$(document).ready(function(){ 

     var initialresults = 5; 

     var counter = 0; 

     while (counter < initialresults){ 

      $('.' + counter).show();   
      counter++; 

     }; 

     $(".showMore").click(function(){ 

      var initialresults = initialresults + 5; 
      var counter = 0; 

      while (counter < initialresults){ 

       $('.' + counter).show();   
       counter++; 

      } 

     }); 


    }); 

PHP/HTML：

echo "<div class='show_result " . $counter ."' id='show_result' style='display:none;'>"; 

<div class="showMore">Show more results</div> 

Answer 1

擺脫的

var initialresults = initialresults + 5; 

，代之以

initialresults = initialresults + 5; 

而計數器回到0意味着你每次都會顯示每一樣東西。不知道你是否想要（即0-5，然後0-10，然後0-15與0-5,6-10,11-15）。

Answer 2

有幾個問題，先從小東西開始。的ID應該是唯一的，這樣#show_result應該是唯一的，這樣像id='show_result_'.$counter

號碼是無效的CSS類，所以代替.6它應該像.result_6

$(document).ready(function(){ 

    var initialresults = 5; 

    var counter = 0; 

    while (counter < initialresults){ 

     $('.result_' + counter).css('display', 'block');   
     counter++; 

    }; 


     $(".showMore").click(function(e){ 
      e.preventDefault(); 
      console.log('initialResults is undefined', initialresults) 
      //to keep things dynamic lets just find all visible results and count them 
      var numberShowing = $('.showResults:visible').length; 
      console.log(numberShowing); //5 
      var visibleResults = numberShowing + 5 
      var counter = 0; 

      while (counter <= visibleResults){ 
       $('.result_' + counter).css('display', 'block');   
       counter++; 
      } 
     }) 
    }); 

https://jsbin.com/rasenuqoco/edit?html,js,output