複数の要素をループして、それぞれにクリック機能を付けるにはどうすればよいですか？

Question

私はdiv要素を示すか、ドロップダウン（またはラジオボタンまたは何でも）で選択された要素に依存して非表示にすることができるように、アプリのRuby on Railsの要素数をループしようとしています。

私のjavascript/coffescript知識は貧弱ですが、それは恐ろしく構築されるが、それをハッキング数日後、私は、実用的なソリューションを持っています。

$(document).on "turbolinks:load", -> 
    if $('select[id="open_closed[1]"]').val() == "0" or $('select[id="open_closed[1]"]').val() == "1" 
    $('#open_close_times_1').hide() 
    $('select[id="open_closed[1]"]').click -> 
    if $('select[id="open_closed[1]"]').val() == "0" 
     $('#open_close_times_1').hide() 
    if $('select[id="open_closed[1]"]').val() == "1" 
     $('#open_close_times_1').hide() 
    if $('select[id="open_closed[1]"]').val() == "2" 
     $('#open_close_times_1').show() 

    if $('select[id="open_closed[2]"]').val() == "0" or $('select[id="open_closed[2]"]').val() == "1" 
    $('#open_close_times_2').hide() 
    $('select[id="open_closed[2]"]').click -> 
    if $('select[id="open_closed[2]"]').val() == "0" 
     $('#open_close_times_2').hide() 
    if $('select[id="open_closed[2]"]').val() == "1" 
     $('#open_close_times_2').hide() 
    if $('select[id="open_closed[2]"]').val() == "2" 
     $('#open_close_times_2').show() 
. 
. 
. 
return 

これは、次のスニペットがopen_closed [7]まで拡張されるように、店舗の曜日の開店時間を設定するためのものです。私は、これをループで行うべきであると確信しています。私はまた、任意の日数を持つこれの "休日"バージョンを持っている - このソリューションは完全にそこに落ちるが、ループは完璧だろう。

私は（私はここ7にこれを行うと、任意maxに他のコードアップすることができます）と同じ効果を達成するために、ループのいくつかの並べ替えにこれを抽出しようとしてきたが、私は見つけることができません

チュートリアル、またはこれを行うための指示。これは私のハッキングの4日目ですので、どんな指針も感謝して受け取ります。これをリファクタリングして賢明な解決策にしなければならないのは何ですか？ jQueryので

Answer 1

、あなたが少なく、特定のセレクタをターゲットとしている選択項目の配列を取得します。たとえば、「開始」セレクタを使用できます。次に、結果をループして要素を非表示にし、クリックイベントを追加します。

$(document).on("turbolinks:load", function() { 
    var options = $("select[id^='open_closed']"); 
    $.each(options, function(index, item){ 
    if ($(item).val() == 0 || $(item).val() == 1) { 
     $(item).hide(); 
    } 

    $(item).on("click", function() { 
     var open_close_selector = "#open_close_times_" + (index + 1); 
     if ($(item).val() == "0" || $(item).val() == "1"){ 
     $(open_close_selector).hide(); 
     } else { 
     if ($(item).val() == "2") { 
      $(open_close_selector).show(); 
     } 
     } 
    }); 
    }); 
}); 

これは少しきれいにすることができますが、それはあなたに出発点を与えるはずです。

Answer 2

OK - リワークのビットを持つので、これは私のために働いていたものですマーゴの答えに触発さ：

$(document).on 'turbolinks:load', -> 
    options = $('select[id^=\'open_closed\']') 
    $.each options, (index, item) -> 
    open_close_selector = '#open_close_times_' + index 
    if $(item).val() == '0' or $(item).val() == '1' 
     $(open_close_selector).hide() 
    $(item).click -> 
     if $(item).val() == '0' or $(item).val() == '1' 
     $(open_close_selector).hide() 
     else 
     if $(item).val() == '2' 
      $(open_close_selector).show() 
     return 
    return 
    return