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。您拥有的类正在寻找一个带有 ractive 类的内部元素，您不需要它，因为该类在同一个元素上

#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; 
}