JQueryの別の要素で同じ関数を使用する

Question

私はselect（birth_year、birth_month、birth_day）のグループを持っています。私はこのコードを書いて、ドロップダウンを1日の正しい日数で満たし、何も年が選択されていなければ、月、日のドロップダウンを無効にします。私の問題は、別のグループのドロップダウン（entry_year、entry_month 、entry_day）私はこの関数を使用したいフォームに、私はどのようにそれを行うことができないのか分かりません。

この機能を変更して、別のセレクトボックスセットを使用するにはどうすればよいですか？

$(document).ready(function() { 
    $('.sl_birth_year').change(function() { 
    var birth_year = $('#sl_birth_year').val(); 
    if (birth_year != 0) 
    $('#sl_birth_month').attr('disabled', false); 
    else { 
    $('#sl_birth_month').attr('disabled', true); 
    $('#sl_birth_day').attr('disabled', true); 
} 
$('#sl_birth_month').val(0); 
$('#sl_birth_day').val(0); 
    }), 
    $('#sl_birth_month').change(function() { 
    var birth_year = $('#sl_birth_year').val(); 
    var birth_month = $('#sl_birth_month').val(); 
    if (birth_month != 0) { 
    $('#sl_birth_day').attr('disabled', false); 
    var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month; 
    $.ajax ({ 
    type: "POST", 
    url: post_url, 
    success: function(num_of_days) { 
     $('#sl_birth_day').empty(); 
     $('#sl_birth_day').append('<option value="0"> </option>'); 
     for (var i = 0; i < num_of_days; i++) { 
     var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>"; 
    $('#sl_birth_day').append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>"); 
     } 
    } 
    }); 
} 
    else { 
    $('#sl_birth_day').val(0); 
    $('#sl_birth_day').attr('disabled', true); 
} 
    }); 
}); 

Answer 1

要素のIDを可変にして、これらを関数に渡します。私がいたら、このコードを一連の小さな関数に分解します。共通の機能を見つけ出し、それを関数に入れてから再利用します。あなたはそれらを無効にする配列要素を渡すことができる小さな関数を作成することができます。

Answer 2

javascriptで新しい関数を宣言する必要があります。この関数は、ドロップダウングループごとに渡すことができるパラメータを受け入れます。これは、簡略化及び/またはより効率的にこれは、特定のコードのためのものであることができる。要素のため

$(document).ready(function() { 
    SomeFunction('.sl_birth_year', '#sl_birth_month', '#sl_birth_day'); 
}); 

function SomeFunction(strYearClass, strYearID, strMonth, strDay) { 
    $(strYearClass).change(function() { 
    var birth_year = $(strYearID).val(); 
    if (birth_year != 0) 
    $(strMonth).attr('disabled', false); 
    else { 
    $(strMonth).attr('disabled', true); 
    $(strDay).attr('disabled', true); 
} 
$(strMonth).val(0); 
$(strDay).val(0); 
    }), 
    $(strMonth).change(function() { 
    var birth_year = $(strYear).val(); 
    var birth_month = $(strMonth).val(); 
    if (birth_month != 0) { 
    $(strDay).attr('disabled', false); 
    var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month; 
    $.ajax ({ 
    type: "POST", 
    url: post_url, 
    success: function(num_of_days) { 
     $(strDay).empty(); 
     $(strDay).append('<option value="0"> </option>'); 
     for (var i = 0; i < num_of_days; i++) { 
     var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>"; 
    $(strDay).append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>"); 
     } 
    } 
    }); 
} 
    else { 
    $(strDay).val(0); 
    $(strDay).attr('disabled', true); 
} 
    }); 

} 

Answer 3

使用クラス名、関数にラッピング要素への参照を渡す要素を決定相対に親ラッパー

このような何か：

function setDrops(parent) { 
$('.sl_birth_year').change(function() { 
    var yearTarget = $(parent).find('.sl_birth_yearVAL') 
    var birth_year = $(yearTarget).val(); 

..... 
} 

Answer 4

あなたは "、「date_container」のようなクラスで、独自のdivでセレクトボックスの各セットをラップそれぞれが独自のクラス名（例えば「年」と入力選択与えることができます「月」と「日」）、関数を変更してラッピングdivの1つを受け取って相対的に処理します。

私はあなたのためにそれを書きませんが、それは次のようになります。

あなたのhtml：

<div id="this_one_date_container" class="date_container"> 
    <select class="year" ...>...</select> 
    <select class="month" ...>...</select> 
    <select class="day" ...>...</select> 
</div> 
... 
<div id="this_other_date_container" class="date_container"> 
    <select class="year" ...>...</select> 
    <select class="month" ...>...</select> 
    <select class="day" ...>...</select> 
</div> 

あなたのjavascript：

function doWhateverWithSelectDateDiv(selectDateDiv) { 
    var year = selectDateDiv.find('.year'), 
     month = selectDateDiv.find('.month'), 
     day = selectDateDiv.find('.day'); 
    ... 
} 

Answer 5

$(document).ready(function() { 
    var changeBirthYear = function($obj) { 
     var birthMonth = $('.birth_month', $obj); 
     var birthDay = $('.birth_day', $obj); 
     var birth_year = $($obj).val(); 
     if (birth_year != 0) 
     birthMonth.attr('disabled', false); 
     else { 
      birthMonth.attr('disabled', true); 
      birthDay.attr('disabled', true); 
    } 

    var changeBirthMonth = function($obj) { 
     var birthMonth = $('.birth_month', $obj).val(); 
     var birthDay = $('.birth_day', $obj); 
     var birth_year = $($obj).val(); 
     if (birthMonth != 0) { 
      birthDay.attr('disabled', false); 
      var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month; 
      $.ajax ({ 
       type: "POST", 
       url: post_url, 
       success: function(num_of_days) { 
        birthDay.empty(); 
        birthDay.append('<option value="0"> </option>'); 
        for (var i = 0; i < num_of_days; i++) { 
         var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>"; 
         birthDay.append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>"); 
        } 
       } 
      }); 
     } 
     else { 
      birthDay.val(0); 
      birthDay.attr('disabled', true); 
     } 
    } 

    changeBirthYear($('.birth_year_1'));  
    changeBirthYear($('.birth_year_2'));  
    changeBirthMonth($('.birth_year_1')); 
    changeBirthMonth($('.birth_year_2')); 

    //somthing like that 

});