Question

我正在尝试让我的明星评估者保持我在点击容器div中的5个表格列之一时使用的精灵的背景位置。在鼠标悬停时我正在添加一个样式属性来执行它并且可以正常工作，但是当我单击并添加一个具有相同精确css的类时，它不会影响背景位置。我默认添加了这个类，它仍然不起作用。我想这不仅仅是一个css问题。

以下是我正在使用的代码：http://jsfiddle.net/cbYCZ/3/

非常感谢任何帮助。这对我来说是一个真正的面条刮痕。

Answer 1

你有这个规则：

#rating 
{
   background: ...;
}

然后这个规则：

.star3
{
   background: ...;
}

这两个元素同时应用于同一元素，但由于CSS Specificity，具有id（#rating）的元素将覆盖具有类（.star3）的元素，因此添加.class3对渲染页面无任何影响。

将.star3更改为#rating.star3可解决问题：http://jsfiddle.net/gLTSz/

Answer 2

您只需将td的ID添加到div

只看到Demo

希望它有所帮助。

Answer 3

由于您的图片资源（已移除的图片路径）需要进行身份验证，因此很难确切了解到底发生了什么。

但是，我可以看到你并没有真正使用jQuery api：

要删除课程，您应该使用.removeClass()

有关添加和删除样式的信息，请.css()

有关添加和删除值的信息，请.val()

对于mouseover / mouseout，有.hover()

我首先要改变它们，看看问题是否仍然存在。否则，您需要将星形图像放在公共场所，这样我们才能看到您的代码在行动

Answer 4

这是一个比你的jQuery更简洁的解决方案。您可能会发现它以实用的方式教您许多更先进的技术。

我已经相当广泛地评论了代码。如果您有任何问题，请告诉我。

请注意，我的解决方案取决于@Abhi Beckert的关键观察，所以他应该获得接受的答案荣誉。

代码在这里：http://jsfiddle.net/GtPnr/4/

这是新的HTML：

<div id="rating">
    <table>
        <tr>
            <td><div id="1star" data-stars="1"></div></td>
            <td><div id="2star" data-stars="2"></div></td>
            <td><div id="3star" data-stars="3"></div></td>
            <td><div id="4star" data-stars="4"></div></td>
            <td><div id="5star" data-stars="5"></div></td>
        </tr>
    </table>
</div>
<input type="hidden" id="stars" />

我的先生，但评论说，Javascript：

// store re-used jQuery objects in variables to greatly improve performance.
// this avoids re-creating the same jQuery object every time it is used.
var $rating = $('#rating');
var $starsField = $('#stars');
// use the .hover() as a shortcut for 'mouseover' and 'mouseout' handlers.
$rating.find('td').hover(function() {
    // remove all star classes then dynamically construct class name to add
    // using the data method to retrieve the value stored in the "data-stars" attribute
    // I added.
    $rating.removeClass('star1 star2 star3 star4 star5').addClass('star' + $(this).find('div').first().data('stars'));
}, function() {
    // this is the mouse-out handler. Remove all star classes
    $rating.removeClass('star1 star2 star3 star4 star5');
    // if the current value in the hidden field is set, then assign the correct class
    // so the star's clicked value is respected.
    var curVal = $starsField.val() || 0;
    if (curVal > 0) {
        $rating.addClass('star' + curVal);
    }
}).click(function() {
    // when clicking a star, store the value in the hidden input
    $starsField.val($(this).find('div').first().data('stars'));
});

我如何添加类。处理鼠标悬停但不点击

4 个答案: