jquery divをクリックするとさらに結果が表示されます

Question

私はPHPの検索結果をさらに表示しようとしています。基本的なページには最初の5つの結果が表示され、それぞれの結果がさらに表示されます。さらに5つの結果が表示されます。以下のスクリプトは最初の部分を完全にうまく処理しますが（最初の5つの結果を示します）、2番目の部分は機能しません。

$(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：：私は間違って

jQueryの何が起こっているか誰も手掛かり、オプションの多くを試みたが、それは仕事を取得していないよう

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クラスではありませんので、代わりに0.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

のようなものでなければなりません一意である必要があります一意である必要があります