Ajout d'objets divers au DOM dans un ordre séquentiel

Question

j'ai vu comment ajouter le même objet séquentiellement au DOM via ici - http://webdesignerwall.com/tutorials/jquery-sequential-list/comment-page-6

Ma question est un peu plus complexe que j'ai différents modèles de formulaire l'utilisateur peut choisir. Lorsque l'un de ces modèles est choisi, un événement ajoute le nouvel objet, puis dans la base de données par l'identifiant (color_1, color_2, color_3, color_4, color_5).

Ex.

« Faire jusqu'à cinq sélections de couleurs » modèles d'objets sont trois couleurs principales, choix chacun avec trois nuances de cette couleur: rouge (canneberge, rouge foncé, rouge) vert (chasseur, jade, kelly) Bleu (marine, royal, pervenche)

La forme et le modèle rouge par exemple ressemblerait à ceci:

<div class="color-container"></div> 
<form action='/colors' method='post' class="form-horizontal"> 
<div class="red-template">  
    <p> 
     <select class="red-shade input-medium"> 
     <option>cranberry</option> 
     <option>maroon</option> 
     <option>scarlet</option> 
     </select> 
    </p> 
</div> 
<div class="green-template">Green Ex</div> 
<div class="blue-template">Blue Ex</div> 

Le JQuery ressemble à ceci:

<script> 
    $(document).ready(function() { 
    $('.add-red').click(function(e) { 
    e.preventDefault(); 

    $(".red-template") 
     .clone() 
     .show() 
     .removeClass("red-template") 
     .addClass("red_" + i) 
     .appendTo(".color-container"); 
    }); 

    $(".red-shade") 
     .removeClass(".red-shade") 
     .addClass("shade_" + i); 
    }); 

}); 
</script> 

J'ai le même HTML et JQuery pour le bleu et le vert. Si un modèle rouge est ajouté, j'ai besoin de div class = "red-template" pour passer à class = "red_1" puis la classe = "red-shade" à class = "shade_1". Si un autre rouge est choisi, "red_2" et "shade_2".

je crois que ce qui suit devrait fonctionner:

for(i=1;i<=5;i++) { 
$('.red-template').attr('class', 'red_' + i); 
} 

mais je ne suis pas sûr où placer ce code. Si je le place directement après $ (document), je n'attends pas l'événement click. Si je le place après le $ ('. Add-red'), alors il ne sera pas séquentiel.

Answer 1

Publier un violon nous aiderait, vous aiderait. En l'état, nous ne faisons que deviner quel est votre problème. Comme @Neil S l'a mentionné, votre code utilise incorrectement les identifiants (pour les débutants).

Je suis allé et a créé un violon ici pour voir si c'est ce que vous cherchez: http://jsfiddle.net/KnbYG/

pour répondre à votre question, vous boucle serait probablement aller à l'intérieur du bloc suivant:

$(document).ready(function() { 
     $('select.input-medium').on('change', function (e) { 
      e.preventDefault(); 

     ***here*** 
     }); 
    });