fadeToggle vieler Element

Question

bitte Ich möchte für jede Taste fadeToggle anzuwenden, sondern es mit dieser Methode nicht funktioniert, versuche ich mit diesem How to use javascript variables in jquery selectors gelten, aber nicht erfolgreich

diese HTML-Code ist

<div id="ajouter" class="dropdown"> 
     <ul> 
      <li> 
       <button class="projetbutton">Projet</button> 
       <form class="projet" style="display:none"> 
        <input type="text" /> 
        <input type="submit" /> 
       </form> 
      </li> 

      <li> 
       <button class="famillebutton">Famille</button> 

       <form class="famille" style="display:none"> 
        <input type="text" /> 
        <input type="submit" /> 
       </form> 
      </li> 
     </ul> 
    </div> 

und das ist Skript gelten für die Tasten

<script> 
var classElement = ["projet", "famille"]; 
var button = "button"; 
for (var i = 0; i < classElement.length; i++) { 
    var classbutton = classElement[i].concat(button); 

    $(document).ready(function() { 
     $('.classbutton').click(function() { 
      $(".classElement[i]").fadeToggle(); 
     }); 
    }); 
} 
</script> 

Bitte, wenn es eine andere Methode, um diesen Job zu tun.

Answer 1

Sie können die Beziehung zwischen Element und verschiedenen DOM-Traversalmethoden nutzen, die für das Zielelement verfügbar sind, und dann die gewünschte Operation ausführen.

Verknüpfen Sie den Click-Handler mit einer gemeinsamen Klasse, hier verwendet classbutton mit den Elementen, dann .next() verwendet, um das form Element zu erhalten.

$(document).ready(function() { 
 
    $('.classbutton').click(function() { 
 
    $(this).next().fadeToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ajouter" class="dropdown"> 
 
    <ul> 
 
    <li> 
 
     <button type="button" class="classbutton">Projet</button> 
 
     <form style="display:none"> 
 
     <input type="text" /> 
 
     <input type="submit" /> 
 
     </form> 
 
    </li> 
 

 
    <li> 
 
     <button type="button" class="classbutton">Famille</button> 
 

 
     <form style="display:none"> 
 
     <input type="text" /> 
 
     <input type="submit" /> 
 
     </form> 
 
    </li> 
 
    </ul> 
 
</div>