0

我正在尝试创建一个带有选择标签的表单......当用户按下它时，我也有一个重复的表单按钮，它在下面重复了相同的表单。

我的问题是当表单重复并且用户使用选择标签时（当用户选择某个值时我有一些 jQuery.... 有这个fadeIn()它使用同一个类，所以当我需要它时两个选择标签一起工作成为彼此的个体。

这是我正在研究的小提琴的链接：http: //jsfiddle.net/d0okie0612/ThnKc/

这是我的html

  <select id="print_size_options_LargeFormatBlackWhite">
    <option value="">1</option>
    <option value="">2</option>
    <option value="customSize">3</option>
   </select>

   <div class="custom_size" style="display: none;">
     Hello
   </div>

   <br />
   <br />
   <br />
   <select id="print_size_options_LargeFormatBlackWhite">
     <option value="">1</option>
     <option value="">2</option>
     <option value="customSize">3</option>
   </select>

   <div class="custom_size" style="display: none;">
     Hello
   </div>

这是jQuery：

    $("#print_size_options_LargeFormatBlackWhite").change(function(evt) {
      var selected;
      selected = $(this).val();
      if (selected === "customSize") {
      return $(".custom_size").fadeIn();
      } else {
      return $(".custom_size").fadeOut();
       }
       }).change();

所以我只想为每个不同的选择标签提供独立的行为......我不能将它分配给不同的类，因为用户可能会重复表单 10 次......

我显然是 jQuery 的新手，所以如果你能帮助我，那就太好了

谢谢

4

2 回答 2

1

请参阅对同一页面中的多个实例使用相同的 id 是无效标记，它不会那样工作。你必须做一些这样的解决方法：

var i=0;
$('a').click(function () {
    $('select').last().clone().attr('id', 'print_size_options_LargeFormatBlackWhite'+ i++).appendTo('body');
     $('.custom_size').last().clone().hide().appendTo('body');
});
$('select').each(function (i, v) {
   $(this).attr('id', $(this).attr('id') + i);
});
$(document).on('change', '[id^="print_size_"]', function (evt) {
  var selected;
  selected = $(this).val();
  if (selected === "customSize") {
     $(this).next(".custom_size").fadeIn();
  } else {
     $(this).next(".custom_size").fadeOut();
  }
}).change();

检查这个小提琴

随着你的最新评论：

您必须将事件委托给父元素或$(document).

于 2013-03-21T17:58:20.543 回答
0

尝试这个：

$(document).on("change", "#print_size_options_LargeFormatBlackWhite",function(evt) {
    var selected, index;
    selected = $(this).val();
    index = $("select").index(this);
    if (selected === "customSize") {
        $($(".custom_size")[index]).fadeIn();
    } else {
        $($(".custom_size")[index]).fadeOut();
    }
});

不知道为什么我必须包装索引，但我做到了。

Ps 这是一个小提琴http://jsfiddle.net/Dtwigs/ThnKc/2/

于 2013-03-21T18:05:46.303 回答