Basculer discrètement dans une boucle

Question

J'utilise Toggle Unobtrusive dans une vue qui contient de nombreux enregistrements (Orders). Je l'ai fait travailler sur des divs individuels, mais je veux maintenant que cela fonctionne pour que chaque commande puisse être étendue/contractée individuellement dans la boucle en utilisant son propre lien à bascule (le lien est également bouclé). Quand mon div extensible est appelé x, le problème est que chaque boucle du bouton bascule juste la première div au lieu de la div dans sa propre itération - j'imagine que la meilleure façon est d'utiliser le order_id pour l'identifiant de chaque section extensible?

téléspectateurs plus expérimentés pourraient rire de cette :) mais moi avons essayé de jouer avec un code tel que:

<% for order in @orders do %> 

# toggle 
<a class="toggle" href="#<%= order.id %>" rel="toggle[<%= order.id %>]">Toggle</a> 

# expandable div with its own nested toggle 
<div id="<%= order.id %>" class="expand_me"> 
    # nested toggle inside the looping expandable div 
    <a class="toggle" href="?" rel="toggle[?]">Toggle</a> 
    <div id="?" class="expand_me"> 
    ... 
    </div> 
</div> 

<% end %> 

Comme vous pouvez le voir, dans chacune de ces boucles il y a des sous-sections Je voudrais être capable de basculer aussi bien. Comment la solution changerait-elle si je devais être capable de basculer plusieurs divs à l'intérieur de la div en boucle extensible? Les? S sont parce que si je me réfère à la div toggle principal comme order.id alors je ne sais pas comment faire référence à plusieurs divs internes - c'est évidemment en fonction du problème principal.

Answer 1

Avez-vous regardé dans une bibliothèque JavaScript telle que Jquery pour cela? Vous devriez être capable de le faire sans avoir besoin d'ajouter des classes ou des ID spéciaux. Si le lien <a> est juste pour basculer le processus <div>, alors vous pouvez simplement passer le JavaScript à l'élément suivant dans le DOM.