[英]How I prevent code duplication in jquery?
I have to use same block of jQuery
code several time in my page. 我必须在页面中多次使用相同的
jQuery
代码块。 Only changing selector
names and url
parameters. 仅更改
selector
名称和url
参数。
My code look something like this: 我的代码如下所示:
$(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;
})
});
There are lot of code duplication. 有很多代码重复。 My question is, can any body help me to prevent this code duplication.
我的问题是,任何机构都可以帮助我防止此代码重复。 Reason is, I have to this code block for lot of
selectors
and urls
. 原因是,对于很多
selectors
和urls
,我都必须使用此代码块。
Hope somebody may help me out. 希望有人可以帮助我。 Thank you.
谢谢。
Extract the common code into a function: 将通用代码提取到函数中:
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');
});
});
Try moving the common stuff out into a function. 尝试将常见的东西移到一个函数中。
function commonFunc(c, d, pStr) {
var url = '';
if (d.trim().length) {
url+='&mth='+d;
}
if (c.trim().length) {
url+='&cat='+c;
}
return pStr+url;
}
Then in the change function it will be: 然后在change函数中将是:
$("#year").change(function() {
var c = $("#category").val();
var d = $(this).val();
location.href = commonFunc(c, d, '?p=chart');
});
Plus you can also put all the listeners in one ready function 另外,您还可以将所有侦听器置于一个就绪功能中
[EDIT] It's a good habbit to add ; [编辑]这是个好习惯; to the end of your statements
至您的陈述的结尾
maybe you can do it like this: 也许您可以这样做:
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.