使用单选按钮通过 jquery 动态显示和隐藏 div

Question

我在页面上有以下 HTML 的多个实例：

<div class="input radio optional">
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_false">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_false" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="false" />Yes
  </label>
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_true">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_true" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="true" />No
  </label>
</div>

<div class="input numeric integer required">
  <label class="integer required" for="warranty_selected_environments_attributes_1_distance">Distance</label>
  <input class="numeric integer required" id="warranty_selected_environments_attributes_1_distance" name="warranty[selected_environments_attributes][1][distance]" required="required" size="50" step="1" type="number" />
</div>

此代码是使用 simple_form gem 生成的，因此我对其没有太多控制权。它也是一种嵌套属性形式，因此系统中的每个“环境”都有上述一组代码。我希望能够根据单选组是真还是假来显示和隐藏文本输入“距离”。

我一直在试图找出一种方法来观看广播组，然后知道页面上要隐藏或显示哪个“距离”框。现阶段我能想到的最好的方法是使用名称值，去掉最后一个 [_destroy] 部分并添加 [distance]。值得注意的是，以上所有内容都包含在列出的每个环境的 div 中。

对于冗长的 HTML 表示歉意:)

Answer 1

哇，比我想象的容易。 jquery 中方便的closest() 方法使这变得简单：

$(":radio").change(function () {
    $(this).closest('.section').children('.input.numeric').toggle(this.checked && this.value == 'false');
});