[英]How I prevent code duplication in jquery?
我必須在頁面中多次使用相同的jQuery
代碼塊。 僅更改selector
名稱和url
參數。
我的代碼如下所示:
$(document).ready(function () {
$("#year").change(function() {
var url = '';
var c = $("#category").val();
var d = $(this).val();
if(c.trim().length) { url+='&cat='+c }
if(d.trim().length) { url+='&mth='+d }
location.href="?p=summery"+url;
})
$("#category").change(function() {
var url = '';
var c = $(this).val();
var d = $("#year").val();
if(d.trim().length) { url+='&mth='+d }
if(c.trim().length) { url+='&cat='+c }
location.href="?p=summery"+url;
})
});
$(document).ready(function () {
$("#year2").change(function() {
var url = '';
var c = $("#category2").val();
var d = $(this).val();
if(c.trim().length) { url+='&cat='+c }
if(d.trim().length) { url+='&mth='+d }
location.href="?p=card"+url;
})
$("#category2").change(function() {
var url = '';
var c = $(this).val();
var d = $("#year2").val();
if(d.trim().length) { url+='&mth='+d }
if(c.trim().length) { url+='&cat='+c }
location.href="?p=card"+url;
})
});
$(document).ready(function () {
$("#year3").change(function() {
var url = '';
var c = $("#category3").val();
var d = $(this).val();
if(c.trim().length) { url+='&cat='+c }
if(d.trim().length) { url+='&mth='+d }
location.href="?p=chart"+url;
})
$("#category3").change(function() {
var url = '';
var c = $(this).val();
var d = $("#year3").val();
if(d.trim().length) { url+='&mth='+d }
if(c.trim().length) { url+='&cat='+c }
location.href="?p=chart"+url;
})
});
有很多代碼重復。 我的問題是,任何機構都可以幫助我防止此代碼重復。 原因是,對於很多selectors
和urls
,我都必須使用此代碼塊。
希望有人可以幫助我。 謝謝。
將通用代碼提取到函數中:
function navigateBasedOnInput(monthInput, categoryInput, urlFragment) {
var url = '',
category = $(categoryInput).val(),
month = $(monthInput).val();
if (category.trim().length) {
url += '&cat=' + encodeURIComponent(category);
}
if (month.trim().length) {
url += '&mth=' + encodeURIComponent(month);
}
location.href = "?p=" + encodeURIComponent(urlFragment) + url;
}
$(document).ready(function () {
$("#year, #category").change(function() {
navigateBasedOnInput('#year', '#category', 'summery');
});
$("#year2, #category2").change(function() {
navigateBasedOnInput('#year2', '#category2', 'card');
});
$("#year3, #category3").change(function() {
navigateBasedOnInput('#year3', '#category3', 'chart');
});
});
嘗試將常見的東西移到一個函數中。
function commonFunc(c, d, pStr) {
var url = '';
if (d.trim().length) {
url+='&mth='+d;
}
if (c.trim().length) {
url+='&cat='+c;
}
return pStr+url;
}
然后在change函數中將是:
$("#year").change(function() {
var c = $("#category").val();
var d = $(this).val();
location.href = commonFunc(c, d, '?p=chart');
});
另外,您還可以將所有偵聽器置於一個就緒功能中
[編輯]這是個好習慣; 至您的陳述的結尾
也許您可以這樣做:
var urls={
year1:"",
year2:"",
year3:""
};
["year1","year2","year3"].forEach(function(e){
var self = $("#"+e);
self.change(function(){
var url = urls[e],
c = self.val(),
d = $(this).val();
if(c.trim().length) { url+='&cat='+c }
if(d.trim().length) { url+='&mth='+d }
location.href="?p=card"+url;
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.