JQuery 添加类功能不起作用

Question

我正在尝试拥有一个类似于 Twitter 推文区域的元素。 DIV 在鼠标悬停时应该是不同的颜色，背景图像的位置是新的。

然后，当用户单击时，背景图像的位置应该再次移动，并且只有当用户没有悬停时，背景颜色才应该改变。我试过了，但行不通。

JS--

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS--

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

任何想法有什么问题。新类不接缝应用于元素。

很棒

Answer 1

$(id).addClass('ractive');

没有得到合适的选择器。根据您的标记，您应该这样做。

$('.review').click(function() {
    $(this).addClass('ractive');
});

然后您应该从您的标记中删除 onclick="reviews(this);。如果您使用 jquery 来应用类，请总体上坚持使用该方法。不要混合使用干扰和 unobtrusive javascript . 上面发布的代码只会将 ractive 类添加到您单击的链接。

此外，将您的 css 从 #reviews .review .ractive 更改为 #reviews .ractive。您拥有的类(class)正在使用类 ractive 查找内部审查元素，您不需要它，因为该类(class)位于同一元素上

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}