Question

我已经看到了如何通过这里顺序将相同的对象添加到DOM - http://webdesignerwall.com/tutorials/jquery-sequential-list/comment-page-6

我的问题有点复杂，因为我有各种用户可以选择的表单模板。当选择其中一个模板时，事件会附加新对象，然后通过id（color_1，color_2，color_3，color_4，color_5）附加到数据库中。

实施例

“最多可选择五种颜色” 对象模板是三种主要颜色，每种颜色都有三种颜色：红色（蔓越莓，栗色，猩红色）绿色（猎人，玉，凯莉）蓝色（海军，皇室，长春）

例如，表单和红色模板如下所示：

<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);
}

但我不确定在哪里放置此代码。如果我将它直接放在$（文档）之后，那么我不会等待click事件。如果我将它放在$（'。add-red'）之后，那么它将不是顺序的。

Answer 1

发布小提琴会帮助我们，帮助你。就目前而言，我们只是猜测你的问题可能是什么。正如@Neil S所提到的，你的代码错误地使用了id（对于初学者）。

我去了，在这里创造了一个小提琴，看看你是否正在寻找： http://jsfiddle.net/KnbYG/

在回答你的问题时，你的循环可能会进入下面的区块：

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

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

按顺序将各种对象添加到DOM

1 个答案: