jquery列表混乱

Question

我是jQuery世界的新手，我遇到了一个我无法解决的问题。我有一个带有多个li的无序列表。我试图这样做，当用户点击一行时，行上的bg颜色会发生变化。当单击另一行时，该行的bg颜色会发生变化，而前一行会返回默认颜色。到目前为止，这是我的代码：

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

不幸的是，它没有按计划运作。谁能向我解释我做错了什么？

由于

Answer 1

这将有效，

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

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

Answer 2

您想使用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))时，您尝试选择的所有<li>元素都不是<$(this)>元素且没有意义;同样适用于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/