Question

我有这段代码：

        // 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方式，以便它们看起来很相似。是否有一种干净简洁的方法来完成其中一种或两种方式？

Answer 1

您可以将DOM元素传递给jQuery：

$(event.currentTarget)

Answer 2

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";

Answer 3

使用jquery选择器包装当前目标以将其转换为jquery对象

ConnectionBroker

如何将DOM引用转换为jQuery选择器？

3 个答案: