我有这个代码:
// Mark all menu items inactive
$(".sidebar-nav li").removeClass();
// Mark current memu item active
event.currentTarget.className = "active";
在此之前,我曾经有这样的代码:
$(".sidebar-nav li").css("background", "#383B4C");
event.currentTarget.style.background = "#292B3C";
看到图案了吗?两个示例中的第一行都是jQuery选择器,因此使用了jQuery方法;第二行是DOM引用,因此没有jquery。所以语法是不同的,尽管动作有点相同。
对我来说,这有点代码味。我想同时使用jQuery方式或同时使用非jQuery方式,以便它们看起来相似。有没有一种干净简洁的方法来完成其中的一个或两个?
jQuery方式
用$(...)
包裹event.currentTarget
$(".sidebar-nav li").removeClass();
$(event.currentTarget).addClass("active");
$(".sidebar-nav li").css("background", "#383B4C");
$(event.currentTarget).css('background', "#292B3C");
javascript方式
使用querySelectorAll让您的生活更轻松
var lis = document.querySelectorAll(".sidebar-nav li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
event.currentTarget.className = "active";
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = '#383B4C';
}
event.currentTarget.style.background = "#292B3C";
您可以将DOM元素传递给jQuery:
$(event.currentTarget)
用jquery选择器包装当前目标,将其转换为jquery对象
$(event.currentTarget).addClass('active')
$(event.currentTarget).css('background', '#292B3C')