用javascript減少冗餘功能

我目前在我的網站上運行以下JavaScript，但我真的覺得它真的是多餘的。所以我試圖壓縮它，因爲它們基本上都是一樣的東西，除了不同的數字附加。有沒有一種方法可以使字符串通配符？用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>

來源

2014-06-05 Arian Faurtosh

不得不多給我們一點點，所以我們可以幫助你。 HTML + JavaScript在jsfiddle中拋出。 –

@MathiasaurusRex我現在做一個 –

請看這裏：http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue爲什麼循環不能按照你的期望工作。但是我並沒有將其標記爲重複的，因爲如果你展示HTML，我們可能會向你展示一種更好的方式，根本不需要循環，但是使用類。 – Barmar

給你<select>類，例如

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

然後使用DOM遍歷功能來找到該類型相關的下拉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")。

來源

2014-06-05 19:22:50 Barmar

哇！謝謝！這真太了不起了！ –

用javascript減少冗餘功能

回答

相關問題