Функция изменения jQuery для нескольких форм

Question

У меня есть форма селектора, которая будет отображать или скрывать другие параметры формы (так что вы можете использовать либо последние минуты, либо два поля DatePicker):

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('form select option:selected').val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

В html у меня есть две формы, обе стот же код (за исключением того, что идентификаторы уникальны):

<p>
  <label for="search_minutes_or_date_range">Time Selection:</label>
  <select name="minutes_or_date_range" id="search_minutes_or_date_range"> 
    <option value="minutes" selected="selected">Past Minutes</option> 
    <option value="date_range">Date Range</option> 
  </select>
</p>
<div class="minutes" >
  <p>
    <label for="search_past_minutes">Past X Minutes:</label>
    <input id="search_past_minutes" type="text" 
           value="10" name="past_minutes" class="spinner"/>
  </p>
</div>
<div class="date_range" style="display: none">
  <p>
    <label for="search_start_date">Start Date:</label>
    <input id="search_start_date" class="date_picker" 
           type="text" name="start_date" />
  </p>
  <p>
    <label for="search_end_date">End Date:</label>
    <input id="search_end_date" class="date_picker"
           type="text" name="end_date" />
  </p>
</div>

Таким образом, есть два вхождения вышеупомянутого кода с изменением только идентификаторов.Как бы я изменил jQuery, чтобы эта функция показа скрытия работала для них обоих независимо?В настоящее время только первый из них имеет какой-либо эффект, и он влияет на оба появления div.

Answer 1

Вам нужно будет найти форму, основанную на поле выбора, которое было изменено, и ссылаться на ваши изменения именно через эту форму ... что-то вроде ...

$('form select[name=minutes_or_date_range]').change(function () {
    var selectBox = $(this);
    var form = $(this).parent().parent(); //depends on where your form is

    if ($(selectBox).find('option:selected').val() == 'date_range') {
        $(form).find('.date_range').show();
        $(form).find('.minutes').hide();
    } else {
        $(form).find('.minutes').show();
        $(form).find('.date_range').hide();
    }
});

Answer 2

Другая идея:

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('form select option:selected').val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

Вы используете абсолютный селектор в своей функции, попробуйте сделать его относительным.

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('option:selected', $(this)).val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

Вы также можете очистить логику и вызовы show / hide с помощью toggle ()

$('form select[name=minutes_or_date_range]').change(function () {
    $('.minutes', $(this)).toggle();
    $('.date_range', $(this)).toggle();
});

Answer 3

Назначьте общий атрибут CSS clss или REL и используйте его в своем селекторе jQuery.

<div id="div1" data-type="xyz">
 ...
</div>
<div id="div2" data-type="xyz">
 ...
</div>

И для вашего селектора

$("div[data-type=xyz]").hide();