jquery weitere Ergebnisse anzeigen mit Klick auf div

Question

Ich versuche, mehr Ergebnisse von einer PHP-Suche zu zeigen. Die Grundseite sollte die ersten fünf Ergebnisse anzeigen, mit jedem Klick auf "Zeige mehr Ergebnisse" sollten 5 weitere Ergebnisse angezeigt werden. Das folgende Skript macht den ersten Teil perfekt (zeige die ersten 5 Ergebnisse), aber der zweite Teil funktioniert nicht. Ich habe viele Möglichkeiten ausprobiert, aber nicht scheinen, um es zu bekommen zu arbeiten, jemand eine Ahnung, was falsch läuft

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

Befreien der

var initialresults = initialresults + 5; 

und ersetzen mit

initialresults = initialresults + 5; 

Und der Zähler zurück auf 0 bedeutet, dass Sie jedes Ding jedes Mal angezeigt bekommen. Nicht sicher, ob Sie das wollen (d. H. 0-5, dann 0-10, dann 0-15 vs. 0-5, 6-10, 11-15).

Answer 2

ein paar Probleme, gut beginnen mit den kleinen Sachen. IDs sollte eindeutig sein, so sollte #show_result eindeutig sein, so etwas wie id='show_result_'.$counter

Zahlen sind nicht gültig CSS-Klassen so statt 0,6 sollte es sein, so etwas wie .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