Question

我有一个表单，我想在选择一个选项时显示一个输入框。

问题：我允许用户动态添加更多表单元素，因此id会计数，而且我不确定如何定位当前表单输入，而不是每一个人。

例如，在用户添加第二个表单项后，我有类似的内容：

<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>

尝试使用表单输入来定位＃input-2以显示。只想在当前用户正在使用的包装器中为当前的选项包装器显示它。

目前正在尝试：

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

我知道这对父母的使用是错误的，我尝试了很多变化，并且没有能够击中我想要的那个。感谢任何帮助，谢谢！

Answer 1

这个怎么样？？

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

或者如果你弄错了，你可能会想要这个：

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

Answer 2

这个怎么样：

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

它获得了类.form-input的兄弟元素。

Answer 3

我想当你选择.form-input时，你最终会得到至少2个元素：div和输入。有人会表现出来吗？你能试试吗？

 $(this).parent().find('.form-input')[0].toggle();

jQuery以div为目标

3 个答案: