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'); 
});