Question

<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="jquery-1.10.2.min.js">
<link type="text/javascript" src="jquery-latest.min.js">
<body>

<div class="rating_box">
<div class="star1 rating_stars"></div>
<div class="total votes">Votes</div>
</body>
</html>
<script>
$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).prevAll().andSelf().addClass('ratings_over');
        $(this).nextAll().removeClass('ratings_vote'); 
    },
    // Handles the mouseout
    function() {
        $(this).prevAll().andSelf().removeClass('ratings_over');
        set_votes($(this).parent());
    }
);

</script>

当我将鼠标悬停时，为什么这不起作用。图像应该改变不是吗？我在做代码有什么问题吗？请帮忙我的CS风格是

.rating_stars
{
    background:url('star_empty.png') no-repeat;
    height:20px;
    width:20px;
    padding:2px;
    float:left;
    }
.ratings_vote
{
background:url('starfull.png') no-repeat;

}

Answer 1

未经测试，但根据您的HTML代码，JS应为：

$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).removeClass('ratings_vote').addClass('ratings_over');
    },
    // Handles the mouseout
    function() {
        $(this).removeClass('ratings_over').addClass('ratings_vote');
    }
);

Answer 2

为什么要使用JS呢？用户:hover CSS元素会更容易。

<强> HTML

<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="jquery-1.10.2.min.js">
<link type="text/javascript" src="jquery-latest.min.js">

<body>

<div class="rating_box">
    <div class="star1 rating_stars"></div>
    <div class="total votes">Votes</div>
</div>

</body>
</html>

<强> CSS

.rating_stars {
    background:url('star_empty.png') no-repeat;
    height:20px;
    width:20px;
    padding:2px;
    float:left;
}

.rating_stars:hover {
    background:url('starfull.png') no-repeat;
}

更新回答：

<强> HTML

<div class="rating_box">
    <a id="star1" class="rating_stars"></a>
    <a id="star2" class="rating_stars"></a>
    <a id="star3"></a>
    <a id="star4"></a>
    <a id="star5"></a>
    <div class="total votes">Votes</div>
</div>

<强> CSS

.rating_box a {
    float:left;
    padding:2px;
    height:20px;
    width:20px;
    background:url('star_empty.png') no-repeat;
}

.rating_stars { background: url('starfull.png') no-repeat; }

<强>的jQuery

$(document).ready(function() {
    $('.rating_box a').click(function() {
        if (!$(this).hasClass("rating_stars")) {
            $(this).addClass("rating_stars");

            // Make the AJAX call
            $.ajax({
                ...
            });
        }
    });
});

它并不完美而且没有完成，但它可以是可用的东西的开始（我猜）。

评级系统不工作

2 个答案: