Динамически показывать и скрывать div с помощью jquery с помощью переключателей - PullRequest
Новая
       15

Динамически показывать и скрывать div с помощью jquery с помощью переключателей

1 голос
/ 02 апреля 2011

У меня есть несколько экземпляров следующего 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, поэтому я не контролирую его.Это также форма вложенных атрибутов, поэтому для каждой «среды» в системе существует один из приведенных выше наборов кода.Я хочу показать и скрыть текстовый ввод «расстояние» в зависимости от того, является ли радиогруппа истинной или ложной.

Я застрял при попытке выяснить способ просмотра радиогруппы изатем узнайте, какое поле «расстояния» на странице нужно скрыть или показать.Лучшее, что я могу придумать на этом этапе, - это использовать значение имени, убрать последнюю [_destroy] часть и добавить [distance].Стоит отметить, что все вышеперечисленное заключено в div для перечисленной среды.

Извинения за длинный HTML:)

1 Ответ

2 голосов
/ 02 апреля 2011

Ух, проще, чем я думал. Удобный метод closest () в jquery делает это легко: 

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