jQuery優化對懸停事件屬性的訪問

Question

我正在使用CSS圖像精靈進行元素上的滾動效果，將要在鼠標懸停上應用的新類被分配給屬性data-toggle-class，下面是代碼（我現在是微型性能改進和做預優化這是不好的）

$("*[data-toggle-class]").hover(function(ev){ 
     var a = $(this); 
     a.toggleClass(a.attr("data-toggle-class")) 
    }); 

• 我怎麼緩存data-toggle-class屬性，而不是每一個懸停發生時取回。
• 儘管我使用圖像精靈，但在開關效果發生之前還有一點小滯後。這是已知的問題

Answer 1

我只能回答有關緩存（主要是見分隔器下方下注），您可以用封閉做些什麼的問題：

$("*[data-toggle-class]").each(function() { 
    var $elm = $(this), 
     cls = $elm.attr('data-toggle-class'); 
    $elm.hover(function() { 
     $elm.toggleClass(cls); 
    }); 
}); 

什麼，做的，而不是在懸停事件期間爲所有匹配元素調用單個函數，而是爲每個元素生成一個單獨的函數，其中該函數關閉對元素的jQuery包裝器的引用以及其data-toggle-class屬性的副本。它的交易規模（更多的功能=更多的內存，但你必須有批次它開始重要）的速度。

如果你的目標是有懸停類並沒有它的時候不徘徊，我可能做到這一點明確：

$("*[data-toggle-class]").each(function() { 
    var $elm = $(this), 
     cls = $elm.attr('data-toggle-class'); 
    $elm.hover(
     // Start hover 
     function() { 
      $elm.addClass(cls); 
     }, 
     // Stop hover 
     function() { 
      $elm.removeClass(cls); 
     } 
    ); 
}); 

你說

我知道這是微型性能改進和做預優化不好

......但我只想強調一下。以上都會奏效，可能不會造成內存過度使用，並且會導致性能增強，但我傾向於認爲增強會低於人類感知的閾值。

---

我想知道你是否真的需要這個類和JavaScript代碼？除非需要支持IE6，否則CSS僞類正是爲此目的而設計的，並且由瀏覽器本地處理，而不是JavaScript代碼（讀取更快）。例如：

[data-toggle-class] { 
    color: green; 
} 
[data-toggle-class]:hover { 
    color: blue; 
} 

...將與一個data-toggle-class任何元素屬性綠色正常，但藍色徘徊時。如果你需要做基於屬性的值不同的東西，你可以這樣做：

與 data-toggle-class="foo"

[data-toggle-class='foo'] { 
    color: green; 
} 
[data-toggle-class='foo']:hover { 
    color: blue; 
} 
[data-toggle-class='bar'] { 
    color: black; 
} 
[data-toggle-class='bar']:hover { 
    color: red; 
} 

元素將是綠色正常，藍色徘徊的時候; data-toggle-class="bar"通常爲黑色，徘徊時爲紅色。不需要JavaScript。

在上面您瞭解color只是一個例子;如果您使用的是精靈，我希望您使用的是background和background-position。

---

這裏的CSS技術（live copy | source）的合適的例子：

CSS：

.arrow { 
    width: 40px; 
    height: 40px; 
    background-image: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png); 
    background-repeat: none; 
    display: inline-block; 
} 
.style1 { 
    background-position: 0px -220px; 
} 
.style1:hover { 
    background-position: 0px -320px; 
} 
.style2 { 
    background-position: 0px -260px; 
} 
.style2:hover { 
    background-position: 0px -290px; 
} 

HTML：

<div class="arrow style1"></div> 
<div class="arrow style2"></div> 

注意你怎麼可以很容易地控制哪些箭頭出現，聲明，沒有JavaScript。現在，當然，如果你的箭頭出現的條件比這更復雜，那麼你可能不得不去JS。我只是說，對於最簡單的懸停操作，它不是必需的。