在JQuery的不同元素上使用相同的函数

Question

我有一组选择（birth_year，birth_month和birth_day）。我编写了这个代码，填充一个正确的一个月的天数的下拉列表，禁用月份，日下拉如果没有选择年份等等。我的问题是，我有另一组下拉列表（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

你variablize上的元素的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

你可以换每组的选择框在其自己的DIV中包含“date_container”一类，给每一个选择输入自己的类名（如“年”，“月“和”日“），然后改变你的功能，这样它就能收到你的一个包装div并相对于它工作。

我不会写吧，但它可能看起来像：

你的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 

});