添加各種對象的DOM按順序

我已經看到了如何通過此相同的對象依次添加到DOM - http://webdesignerwall.com/tutorials/jquery-sequential-list/comment-page-6 添加各種對象的DOM按順序

我的問題是更復雜一點我有不同的表單模板的用戶可以選擇。當選擇其中一個模板時，事件將追加新對象，然後通過id（color_1，color_2，color_3，color_4，color_5）將其添加到數據庫中。

Ex。

「讓多達五種顏色的選擇」對象模板主要有三種顏色，選擇的每一個與三個色調是顏色：紅色（蔓越莓，栗色，猩紅熱）格林（獵人，玉石，凱利）藍（海軍，皇家，長春花）

的形式和例如紅色模板應該是這樣的：

<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>

jQuery的是這樣的：

<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>

我對藍色和綠色具有相同的HTML和JQuery。如果添加了紅色模板，我需要將div class =「red-template」更改爲class =「red_1」，然後將class =「red-shade」更改爲class =「shade_1」。如果選擇另一個紅色，則選擇「red_2」和「shade_2」。

我相信下面應該工作：

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

，但我不知道在何處放置此代碼。如果我將它直接放在$（document）之後，那麼我不會等待click事件。如果我將它放在$（'。add-red'）之後，那麼它將不會是順序的。

來源

2013-08-20 csakon

你應該只有一個具有任何唯一ID的元素。您應該使用一種顏色而不是ID。另外，你不能在任何一個元素上有多個ID，所以你應該使用color_1和。人。 –

發佈小提琴會幫助我們，幫助你。就目前而言，我們只是猜測你的問題可能是什麼。正如@Neil S提到的，你的代碼不正確地使用了id（對於初學者）。

我去創造一個小提琴這裏看到，如果這就是你在找什麼：在回答你的問題 http://jsfiddle.net/KnbYG/

，你循環可能會去下面的塊中：

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

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

來源

2013-08-20 23:44:12 ochi

對不起，我感到困惑。我從來沒有使用JSfiddle，這應該幫助我更好地解釋我想要完成的事情。我需要依次計算每個要添加的對象。這裏是我的最新迭代小提琴 - http://jsfiddle.net/53H4w/1/ – csakon

嗨@csakon有你的小提琴的語法錯誤，我解決它並顯示正在添加的項目的計數器。 http://jsfiddle.net/53H4w/4/ 讓我知道如果這是你以後或如果我不在正確的軌道上:) – ochi

添加各種對象的DOM按順序

回答

相關問題