0

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

我的问题有点复杂，因为我有各种用户可以选择的表单模板。When one of these templates is chosen, an event appends the new object, then into the database by the 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);
}

但我不确定在哪里放置这段代码。如果我将它直接放在 $(document) 之后，那么我不会等待点击事件。如果我把它放在 $('.add-red') 之后，那么它就不会是连续的。

4

1 回答 1

0

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

我去这里创建了一个小提琴，看看这是否是你要找的：http: //jsfiddle.net/KnbYG/

在回答您的问题时，您循环可能会进入以下块：

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

         ***here***
      });
  });
于 2013-08-20T23:44:12.027 回答