我必须在我的页面中多次使用相同的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
,我必须使用此代码块。
希望有人可以帮助我。 谢谢。
答案 0 :(得分:2)
将公共代码提取到函数中:
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');
});
});
答案 1 :(得分:1)
尝试将常用内容移动到函数中。
function commonFunc(c, d, pStr) {
var url = '';
if (d.trim().length) {
url+='&mth='+d;
}
if (c.trim().length) {
url+='&cat='+c;
}
return pStr+url;
}
然后在更改功能中它将是:
$("#year").change(function() {
var c = $("#category").val();
var d = $(this).val();
location.href = commonFunc(c, d, '?p=chart');
});
另外,您还可以将所有侦听器放在一个就绪函数中
[编辑]这是一个很好的习惯;到你的陈述结束
答案 2 :(得分:0)
也许你可以这样做:
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;
});
});