0

オプションが選択されたときに入力ボックスを表示したいフォームがあります。

問題:ユーザーがより多くのフォーム要素を動的に追加できるようにしているため、ID がカウントアップされ、現在のフォーム入力をターゲットにする方法がわかりません。

例として、ユーザーが 2 番目のフォーム項目を追加した後、次のようなものがあります。

<div class="option-wrapper">
    <div id="condition-1" class="condition">
      <select id="option-1" class="option">
          <option value="0">Select...</option>
          <option value="1">Option One</option>
          <option value="2">Option Two</option>
      </select>
      <select id="operator-1" class="operator">
          <option value="0">Select...</option>
          <option value="1">greater than</option>
          <option value="2">less than</option>
      </select>
      <div id="input-1" class="form-input" style="display:none;">
          <input id="form-input-1" class="form-input"></input>
      </div>
    </div>
</div>

<div class="option-wrapper">
    <div id="condition-2" class="condition">
      <select id="option-1" class="option">
          <option value="0">Select...</option>
          <option value="1">Option One</option>
          <option value="2">Option Two</option>
      </select>
      <select id="operator-2" class="operator">
          <option value="0">Select...</option>
          <option value="1">greater than</option>
          <option value="2">less than</option>
      </select>
      <div id="input-2" class="form-input" style="display:none;">
          <input id="form-input-2" class="form-input"></input>
      </div>
    </div>
</div>

form-input を使用して、 #input-2 をターゲットにして表示しようとしています。ユーザーが現在作業しているラッパー内の現在のオプションラッパーに対してのみ表示したい.

現在試行中:

$('.operator').change(function() {
switch (this.value) {
    case '0':
        break;
    case '1':
        $(this).parents('.form-input').toggle();
        break;
}
});

親のこの使用法が間違っていることはわかっています。多くのバリエーションを試しましたが、希望するものをヒットできませんでした。どんな助けでも大歓迎です、ありがとう！

4

3 に答える 3

2

これはどうですか：？

$('.operator').change(function() {
    if (this.value === 1) 
            $('.form-input:last').toggle();
});

または、間違っている場合は、これが必要になる場合があります。

$('.operator').change(function() {
    if (this.value === 1) 
            $(this).parent().find('.form-input').toggle();
});
于 2012-05-21T18:39:51.270 に答える
1

これはどう：

$(this).siblings(".form-input").toggle();

class を持つ兄弟要素を取得し.form-inputます。

于 2012-05-21T18:41:37.400 に答える
-1

.form-input を選択すると、少なくとも 2 つの要素 (div と入力) が作成されると思います。1つのことで表示されますか？これを試していただけますか？

 $(this).parent().find('.form-input')[0].toggle();
于 2012-05-21T18:54:54.957 に答える