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

我有一組選擇（birth_year，birth_month和birth_day）。我編寫了這個代碼，填充一個正確的一個月的天數的下拉列表，禁用月份，日下拉如果沒有選擇年份等等。我的問題是，我有另一組下拉列表（entry_year，entry_month ，entry_day）的形式，我想用這個功能，我不知道我該怎麼做。在JQuery的不同元素上使用相同的函數

如何修改此功能以使用另一組選擇框？

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

來源

2012-02-10 Hrabovsky Marián

正確的表格將有助於閱讀碼。同時 - 您可以將其創建爲一個命名函數，該函數接收對象ID（年，月，日）的參數。然後在出生ID和入口ID上調用這個函數。 – Mikhail 2012-02-10 17:06:02

你variablize上的元素的ID，並通過這些進入的功能。如果我是這樣，我會把這些代碼分解成一系列較小的函數。找到常用功能並將其放入函數中，然後重用你可以創建一個小函數，你可以傳入一個數組元素來禁用它們。

來源

2012-02-10 17:07:05 matpol

-1試圖發明「變化」一詞。（不是真的，但它看起來很糟糕。） – Blazemonger 2012-02-10 17:29:17

我不苦！ – matpol 2012-02-13 08:40:31

你需要在你的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); 
} 
    }); 

}

來源

2012-02-10 17:07:36 anothershrubery

的元件使用的類名，傳遞到纏繞元件的功能的引用，並確定元素相對到父包裝器。

事情是這樣的：

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

..... 
}

來源

2012-02-10 17:09:30

你可以換每組的選擇框在其自己的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'); 
    ... 
}

來源

2012-02-10 17:13:17 Bastes

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

});

來源

2012-02-10 17:13:39 orolo

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

回答

相關問題