jquery列表混淆

Question

我是一個新的jQuery世界，我遇到了一個我無法解決的問題。我有一個無序列表與多個李的。我試圖做到這一點，當用戶點擊一行時，行上的顏色變化。當另一行被點擊時，該行的bg顏色會發生變化，並且上一行將返回到默認顏色。這是我的代碼到目前爲止：

$('.allVideos ul li').hover(function(){ 
    $(this).css('background','#c7f1f2'); 
}, function(){ 
    $(":not($(this))").css('background',''); 
}); 

不幸的是，它不按計劃工作。任何人都可以向我解釋我做錯了什麼？

感謝

Answer 1

您要使用的not filter，而不是:not selector：

$('li').click(function() { 
    $(this).css('background-color', '#c7f1f2'); 
    $('li').not(this).css('background-color', ''); 
}); 

演示：http://jsfiddle.net/ambiguous/ZUk88/

當你說li:not($(this))然後你在嘗試選擇不是<$(this)>元素的所有<li>元素，這是沒有意義的;同樣爲li:not(this)。

你也可以從所有的列表項中刪除背景顏色，然後把它添加到你想要的：

$('li').click(function() { 
    $('li').css('background-color', ''); 
    $(this).css('background-color', '#c7f1f2'); 
}); 

演示：http://jsfiddle.net/ambiguous/L6ZNz/

而且，你對一下，但你的代碼的問題舉行會談談論懸停。

---

如果您已經連接到您的<li>元素的顏色，你想，當有人點擊另一個<li>恢復這些顏色，那麼你應該只添加和刪除一個CSS類來改變顏色。 CSS的一點：

.hilight { 
    background-color: #c7f1f2 !important; 
} 

和一些jQuery的：

$('li').click(function() { 
    $(this).siblings('.hilight').removeClass('hilight'); 
    $(this).addClass('hilight'); 
}); 

演示：http://jsfiddle.net/ambiguous/ZJpNa/

Answer 2

這會工作，

$('.allVideos ul li').click(function(){ 

    $(".allVideos ul li").not($(this)).css('background',''); 
    $(this).css('background','#c7f1f2'); 
});