评级系统不工作

时间:2014-01-05 12:00:14

标签: jquery html css

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

}

2 个答案:

答案 0 :(得分:0)

未经测试,但根据您的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');
    }
);

答案 1 :(得分:0)

为什么要使用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({
                ...
            });
        }
    });
});

它并不完美而且没有完成,但它可以是可用的东西的开始(我猜)。