Y at-il un moyen de rendre ce script jquery dynamique?

Question

Je suis en utilisant ce code jquery pour afficher et masquer divs sur ma page. Comme vous pouvez le voir, je suis limité à 5 divs. Y a-t-il un moyen de les rendre dynamiques?

$(document).ready(function() { 
    $('.box').hide(); 
    $('a.toggle').click(function() { 
    $('.box').toggle(400); 
    return false; 
    }); 
}); 

---

<a href="#" class="toggle" title="Show Comments"><img src="images/read.gif" alt="" /></a> 
<div class="box" class="comment">hidden content</div> 

Ceci est mon code révisé

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).next('div.box').toggle(400); 
    }); 
}); 

---

<div class="entry"> 
    <h3>Title</h3> 
    <p>content</p> 
    <p class="posted">Posted by Admin<br /> 
    <a href="#" class="toggle"> 
    <img src="read.gif" alt="" /> 
    </a> 
</div> 
<div class="box" class="comment">Hidden</div> 

Answer 1

En regardant votre balisage, vous pouvez faire quelque chose comme ceci:

$(document).ready(function() { 
    $('div.box').hide(); 

    $('a.toggle').click(function() { // all A elements with class 'toggle' 
    $(this).next('div.box').toggle(400); // toggle the next DIV with class 'box' 
    }); 
}); 

lient Fondamentalement, un gestionnaire de clic à tous vos liens avec la classe toggle, et puis quand on clique dessus, il va chercher le prochain frère (par rapport au lien cliqué) qui est un div avec classe box, en utilisant les Traversing/next fonction.

Vérifiez l'exemple ci-dessus avec votre balisage here.

Edit: Nous avons examiné votre balisage et vos .toggle liens sont imbriqués dans un élément div.entry, il y a aussi un paragraphe non fermé, donc je l'ai réglé à nouveau le code à votre balisage:

$(function() { 
    $('div.box').hide(); 
    $('a.toggle').click(function() { 
    $(this).parents('.entry').next('div.box').toggle(400); 
    }); 
}); 

Vous remarquerez que je recherche l'élément div.entry, puisque les .box sont des frères et soeurs d'eux.

Vérifiez exemple une mise à jour here.