将 jquery 重写为变量
rewrite jquery as variable
我在这里创建了一个工作列表切换器:
http://codepen.io/tincanben/pen/GpjbMQ
有点乱所以我想知道如何重写代码:
$('.switcher a').on('click',function(e) {
if ($(this).hasClass('grid-view')) {
$('#block-listings ul').removeClass('list').addClass('grid');
$('.switcher a.grid-view').addClass('active-grid');
$('.switcher a.list-view').removeClass('active-list');
}
else if($(this).hasClass('list-view')) {
$('#block-listings ul').removeClass('grid').addClass('list');
$('.switcher a.list-view').addClass('active-list');
$('.switcher a.grid-view').removeClass('active-grid');
}
});
因此它是干净的,格式为:
var
// General purpose vars
htmlBody = $('html,body'),
Window = $(window),
Document = $(document),
Switcher = $('#switcher'),
// Switcher
switcher = function(){
var switcher =
},
Ready = function(){
externalLinks();
switcher();
},
我可以建议你把所有东西都放在一个自调用函数中以保护代码不受全局范围的影响,我还在 jquery 对象前加上 $ 符号,这是一个很好的做法(就像你知道的那样对象是否已经包裹在 jquery 中),然后我使用了你的函数并使用 toggleClass 函数删除了双重代码,并采用了一种稍微不同的方法来检查活动网格 class,编码愉快.
我在这里创建了一个工作列表切换器: http://codepen.io/tincanben/pen/GpjbMQ
有点乱所以我想知道如何重写代码:
$('.switcher a').on('click',function(e) {
if ($(this).hasClass('grid-view')) {
$('#block-listings ul').removeClass('list').addClass('grid');
$('.switcher a.grid-view').addClass('active-grid');
$('.switcher a.list-view').removeClass('active-list');
}
else if($(this).hasClass('list-view')) {
$('#block-listings ul').removeClass('grid').addClass('list');
$('.switcher a.list-view').addClass('active-list');
$('.switcher a.grid-view').removeClass('active-grid');
}
});
因此它是干净的,格式为:
var
// General purpose vars
htmlBody = $('html,body'),
Window = $(window),
Document = $(document),
Switcher = $('#switcher'),
// Switcher
switcher = function(){
var switcher =
},
Ready = function(){
externalLinks();
switcher();
},
我可以建议你把所有东西都放在一个自调用函数中以保护代码不受全局范围的影响,我还在 jquery 对象前加上 $ 符号,这是一个很好的做法(就像你知道的那样对象是否已经包裹在 jquery 中),然后我使用了你的函数并使用 toggleClass 函数删除了双重代码,并采用了一种稍微不同的方法来检查活动网格 class,编码愉快.