0

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

问题：我允许用户动态添加更多表单元素，所以 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;
}
});

我知道这种对父母的使用是错误的，我尝试了很多变体，但都无法达到我想要的那个。任何帮助表示赞赏，谢谢！

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 和输入。用一个做会显示吗？你能试试这个吗？

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