複数の単純なjQuery関数を組み合わせる

Question

私はいくつかのドロップダウンボックスを持つフォームを持っています。

ユーザーがドロップダウンメニューから[その他]を選択すると、入力欄のある別のdivが下にスライドします。

問題は、20個以上のドロップダウンボックスがあることです。関連するものをトリガーする関数を1つしか作成できませんか？ここで

は私の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コード：代わりに、彼らが好きなIDとクラスの

$("#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"); 
    } 
}); 

Answer 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"); 
     } 
    }); 
}); 

Answer 2

使用クラス：

$('.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 

Answer 3

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

Answer 4

使用クラス

$(".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"); 
    } 
});