结合多个简单的jQuery函数

时间:2015-10-03 19:30:39

标签: jquery

我有一个带有几个下拉框的表单。

如果用户从下拉菜单中选择“其他”,则另一个带有输入字段的div将向下滑动。

问题是我有20多个这样的下拉框。我可以只创建一个函数来触发相关函数吗?

这是我的HTML:

<div class="container">
    <div>
        <select id="option1" name="city">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="London">London</option>
        </select>
    </div>

    <div id="box1">
        <input type="text" name="city-other">
    </div>
</div>

<div class="container">
    <div>
        <select id="option2" name="color">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="Red">Red</option>
        </select>
    </div>

    <div id="box2">
        <input type="text" name="color-other">
    </div>
</div>

我的jQuery代码:

$("#box1").hide();
$('#option1').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box1").slideDown("slow");
    } else {
        $("#box1").slideUp("slow");
    }
});

$("#box2").hide();
$('#option2').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box2").slideDown("slow");
    } else {
        $("#box2").slideUp("slow");
    }
});

4 个答案:

答案 0 :(得分:1)

使用类而不是id并将它们分类为:

$('.option').on('change', function() {
    if ( this.value == 'Other')
    {
        $(this).slideDown("slow");
    } else {
        $(this).slideUp("slow");
    }
});

编辑:
要隐藏该框,您应该通过以下方式获取选择输入的ID(在更改函数内):

var this_id = $(this)[0].id;
this_id = this_id.split('option')[1]; //get the input id
$("#box" + this_id).hide(); //hide box with same id

答案 1 :(得分:1)

演示:http://jsfiddle.net/fn5ac1f7/

$(function () {
    $(".box").hide();
    $('.option').on('change', function() {
        var parent = $(this).parent().parent();
        var children=$(parent).children()[1];

        if ( this.value == 'Other')
        {
            $(children).slideDown("slow");
        } else {
            $(children).slideUp("slow");
        }
    });
});

答案 2 :(得分:0)

仅为了好玩的演示https://jsfiddle.net/mtffje50/

$(function () {
    // hide all div with id starting with "box"
    $("div[id^='box']").hide(); 
    // observe all select with id starting with "option"
    $("select[id^='option']").on('change', function () {
        // do the trick here...
        var name = this.name.toLowerCase() + '-other';
        var $parent = $("input[name='" + name + "']").parent().parent();
        if (this.value.toLowerCase() == 'other') {
            $parent.slideDown("slow");
        } else {
            $parent.slideUp("slow");
        }
    });
});

答案 3 :(得分:0)

使用班级

$(".box").slideUp();
$('.option').on('change', function() {
var parent = $($(this).parent()).parent();
var children=$(parent).children()[1];

  if ( this.value == 'Other') {
    $(children).slideDown("slow");
  } else {
    $(children).slideUp("slow");
  }
});