用javascript减少冗余函数

Reduce redundant function with javascript

本文关键字：冗余 函数 javascript      更新时间：2023-09-26

我目前有以下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>

给你的<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");
    });
});

演示

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

相关文章：