jquery的變量不工作

Question

我有這樣一段代碼

$('ul.fonts li', '#wizard').live('click', function(e){ 
$('ul.fonts li', '#wizard').removeClass('selected'); 
$(this).addClass('selected'); 
$('blockquote').css('font-family', $(this).find('a').attr("class")) 
e.preventDefault(); 
}) 

我試圖TI優化該碼存儲在變量中選擇。

var $fonts_links = $('ul.fonts li', '#wizard') 
$fonts_links.live('click', function(e){ 
$fonts_links.removeClass('selected'); 
$(this).addClass('selected'); 
$('blockquote').css('font-family', $(this).find('a').attr("class")) 
e.preventDefault(); 
}) 

它工作，除了從第三行。 `$ fonts_links.removeClass（ '選擇'）; 這太奇怪了。有些建議嗎？

Answer 1

你說過「它的工作原理，除了[第三行]。」但您還沒有說如何它不起作用。

但是由於live的整個要點是動態地處理您的DOM更改，您可能不希望在此情況下緩存選擇器的結果：如果在緩存結果後添加更多列表項，它們將不會被添加到您緩存的jQuery實例中，因此當處理程序接下來運行時，您最終會丟失那些（不會從中刪除「selected」類）。所以，如果這就是你所看到的...

如果wizard元素是穩定的（非動態），你可以這樣做：

var $wizard = $('#wizard'); 
$wizard.delegate('ul.fonts li', 'click', function(e){ 
    var $this = $(this); 
    $wizard.find('ul.fonts li').removeClass('selected'); 
    $this.addClass('selected'); 
    $('blockquote').css('font-family', $this.find('a').attr("class")) 
    e.preventDefault(); 
}); 

這樣的話，你只緩存穩定位，並且您通過使用delegate（這是根植於特定元素的live的變體）明確告訴jQuery代表團的根目錄是什麼。

題外話：除非你看到在野外的原代碼中的性能問題，緩存可能不是你的朋友，反正  —緩存之間的內存使用（和複雜性）與權衡執行速度，可能最好只在遇到實際問題時才使用它。但我假設你這樣做是有原因的，因此上面的建議。