0

選択タグを使用してフォームを作成しようとしています...ユーザーが同じフォームを下に複製すると、フォームの複製ボタンも表示されます。

私の問題は、フォームが複製され、ユーザーがselectタグを使用する場合です(ユーザーが特定の値を選択するときに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();

したがって、異なるselectタグごとに独立した動作が必要です......ユーザーがフォームを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 に答える