Question

我有一个选择器表单，可以显示或隐藏其他表单选项（这样您就可以使用过去几分钟或两个日期选择器字段）：

$('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中，我有两种形式，都有相同的代码（除了id是唯一的）：

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

因此，只有两次出现上述代码，只更改了ID。我如何更改jQuery，以便这个show hide函数可以独立地用于它们？目前，只有第一个有任何影响，它会影响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

分配一个公共CSS类或REL属性，并在jQuery选择器中使用它。

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

对于您的选择器

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

Answer 3

另一个想法：

$('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();
    }
});

您还可以使用toggle（）

清理逻辑并调用show / hide

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

jQuery更改多个表单的函数

3 个答案: