자바 스크립트로 중복 기능 줄이기

Question

현재 내 웹 사이트에 다음 자바 스크립트가 실행 중입니다. 실제로 정말 중복 된 느낌입니다. 그래서 나는 그것들을 축약하려고 노력하고 있습니다, 왜냐하면 그것들은 근본적으로 똑같은 것이기 때문에, 다른 숫자들은 덧붙여집니다. 문자열을 와일드 카드로 처리 할 수있는 방법이 있습니까?

$(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"> 

는 그런 종류의 관련 드롭 다운 DIV 선택 찾는 DOM 탐색 기능을 사용

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

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

}); 

DEMO

또한, 입력 값이 아닌 .attr("value")를 얻을 수 .val()를 사용해야합니다.