[英]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.