hide show funktioniert nicht bei mehreren divs

Question

Ich verwende die slideToggle-Methode, um ein div zu verbergen/anzuzeigen. Ich versuche diese Aktion mehrmals auf einer Seite zu replizieren, funktioniert aber nur auf der ersten Seite. Ich habe einen Weg gefunden, wie es bei jedem div funktioniert, muss aber jedes div umbenennen und eine neue Funktion in das Javascript einfügen. Was kann ich tun, um meinen Code zu bereinigen, während ich dies auf der ganzen Seite benutze und neue Instanzen für jedes Div-Element zu erstellen, ist nicht effizient.

<script> 
    $(document).ready(function() { 
    $("#flip").click(function() { 
     $("#panel").slideToggle("slow"); 
    }); 
    $("#flip2").click(function() { 
     $("#panel2").slideToggle("slow"); 
    }); 
    $("#flip3").click(function() { 
     $("#panel3").slideToggle("slow"); 
    }); 
    }); 

</script> 

<p class="button-label">Active</p> 
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
<div id="flip">Click to view HTML</div> 
<div id="panel" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
    </textarea> 
</div> 

<p class="button-label">Disabled</p> 
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
<div id="flip2">Click to view HTML</div> 
<div id="panel2" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
    </textarea> 
</div> 

<p class="button-label">Select Options</p> 
<button type="button" class="btn select-options"><span>select options</span></button> 
<div id="flip3">Click to view HTML</div> 
<div id="panel3" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn select-options"><span>select options</span></button> 
    </textarea> 
</div> 

Answer 1

können Sie Klassen anstelle von IDs und .next() Methode in Callback-Funktion verwenden:

$(document).ready(function(){ 
 
    $(".flip").click(function(){ 
 
     $(this).next('.panel').slideToggle("slow"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="button-label">Active</p> 
 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
 
      </textarea> 
 
    </div> 
 

 
    <p class="button-label">Disabled</p> 
 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn a-cart disabled"><span>ADD TO CART</span> 
 
      </button> 
 
      </textarea> 
 
    </div> 
 

 
    <p class="button-label">Select Options</p> 
 
    <button type="button" class="btn select-options"><span>select options</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn select-options"><span>select options</span> 
 
      </button> 
 
      </textarea> 
 
    </div>

Answer 2

Sie brauchen dies nicht zu replizieren, und benennen Sie <div> und neue Funktion erstellen.

Nehmen Sie diese Schritte:

1. Geben gleiche Klasse zu jedem div wo Sie slideToggle ausführen klicken, um (zB kippen.).
2. Verwenden Sie den Selektor $(this), um das angeklickte Element zu identifizieren.
3. Verwenden Sie die Funktion jquery .next(), um das Element .next zu erhalten.
4. Anruf .slideToggle() darauf.
5. Es ist fertig !!

Sehen Sie den Code unten:

<script> 
     $(document).ready(function() { 
      $(".flip").click(function() { 
       $(this).next().slideToggle("slow"); 
      }); 
     }); 

    </script> 

    <p class="button-label">Active</p> 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel" style="display:none"> 
     <textarea rows="3" cols="50"> 
      <button type="button" class="btn a-cart"><span>ADD TO CART</span> </button> 
     </textarea> 
    </div> 

    <p class="button-label">Disabled</p> 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel2" style="display:none"> 
     <textarea rows="3" cols="50"> 
     <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
     </textarea> 
    </div> 

    <p class="button-label">Select Options</p> 
     <button type="button" class="btn select-options"><span>select options</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel3" style="display:none"> 
     <textarea rows="3" cols="50"> 
      <button type="button" class="btn select-options"><span>select options</span></button> 
     </textarea> 
    </div>