javascript - 用javascript减少冗余函数

Question

我目前在我的网站上运行以下 Javascript，但我真的觉得它真的很多余。所以我试图压缩它，因为它们基本上都是相同的东西，除了附加的数字不同。有没有办法可以通配字符串？

$(document).ready(function() {

    $('#type_1').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_1').show();
        }else {
            $('#dropdown_list_1').hide();
        }
    });

    $('#type_2').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_2').show();
        }else {
            $('#dropdown_list_2').hide();
        }
    });

    $('#type_3').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_3').show();
        }else {
            $('#dropdown_list_3').hide();
        }
    });

    $('#type_4').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_4').show();
        }else {
            $('#dropdown_list_4').hide();
        }
    });

    $('#type_5').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_5').show();
        }else {
            $('#dropdown_list_5').hide();
        }
    });

});

这是我到目前为止所尝试过的，但我无法让它发挥作用。我相信这是因为 for 循环只运行一次，而不是在每个事件上运行。

for(var i = 1; i <= 15; i++){
    $('#type_'+i).change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_'+i).show();
        }else {
            $('#dropdown_list_'+i).hide();
        }
    });
}

编辑:我上传了JSFiddle如果您想测试代码。

HTML:

<form>
    <hr class="separate" />
    <!-- Question 1 -->

    <h3 class="question_title">Survey Question 1</h3>
    <label for="question_1">Question 1</label>
    <input type="text" name="question_1" value="" class="question_field" id="question_1">

    <label for="type_1">Type for Question 1</label>
    <div class="option_field">
        <select name="type_1" id="type_1" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating10">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_1" class="dropdown_list">
        <label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
    </div>

    <hr class="separate" />
    <!-- Question 2 -->


    <h3 class="question_title">Survey Question 2</h3>
    <label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">


    <label for="type_2">Type for Question 2</label>
    <div class="option_field">
        <select name="type_2" id="type_2" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating20">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_2" class="dropdown_list">
        <label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
    </div>


    <hr class="separate" />
    <!-- Question 3 -->


    <h3 class="question_title">Survey Question 3</h3>
    <label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">

    <label for="type_3">Type for Question 3</label>
    <div class="option_field">
        <select name="type_3" id="type_3" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating30">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_3" class="dropdown_list">
        <label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
    </div>

</form>

Answer 1

给你的<select>一个类，例如

<select name="type_2" class="type" size="1">

然后使用 DOM 遍历函数从 SELECT 类型中查找关联的下拉 DIV:

$(document).ready(function () {
    $(".dropdown_list").hide();

    $(".type").change(function () {
        $(this).closest(".option_field").next(".dropdown_list")
            .toggle($(this).val() == "dropdown");
    });

});

DEMO

此外，您应该使用.val()获取输入值，而不是 .attr("value") .