Question

我有一个简单的评级星形脚本，如下所示。我的问题是，一旦用户投票，他就不能改变他的投票（如果他改变主意并希望在提交之前改变他的投票）。我的脚本如下：

$(function() {
$('a').hover(
// Handles the mouseover
function() {
        $(this).prevAll().andSelf().addClass('hoverstar');
        $(this).nextAll().removeClass('visited');
},
// Handles the mouseout
function() {
    $(this).prevAll().andSelf().removeClass('hoverstar');
    $(this).nextAll('a').removeClass('hoverstar');
    $(this).nextAll('a').removeClass('visited');
}
);

$('a').click(
function() {                              
    $(this).prevAll('a').andSelf().addClass('visited');
    $(this).nextAll('a').removeClass('visited');
}
);
});

样式表如下：

 .rate_widget ul
{
    background: url('star-white16.gif') repeat-x;
}
.rate_widget a.visited{
    background: url('star-red16.gif') repeat-x;
}
.rate_widget a.hoverstar{
    background: url('star-gold16.gif') repeat-x;
}

星星显示为如下链接：

<div class='rate_widget'>
<ul>
    <li><a href='#' class='one-star' id="1">1</a></li>
    <li><a href='#' class='two-stars' id="2">2</a></li>
    <li><a href='#' class='three-stars' id="3">3</a></li>
    <li><a href='#' class='four-stars' id="4">4</a></li>
    <li><a href='#' class='five-stars' id="5">5</a></li>
</ul>
</div>

Answer 1

这不是最好的代码，但它应该让你走上正确的轨道：

$('a').click(
    function() {
        if ($(this).parent().parent().attr('voted') !== '1') {
            $(this).prevAll('a').andSelf().addClass('visited');
            $(this).nextAll('a').removeClass('visited');
            $(this).parent().parent().attr('voted', '1');
        }
    }
);

基本上它的作用是当点击完成投票时，它将一个属性“投票”添加到UL元素。如果再次单击该值，则不允许再次进行投票。在悬停时你需要对此进行检查，以便它不会再次突出显示星星。

理想情况下，你会想要比.parent().parent()更整洁的东西。如果您在页面上有一个星级，请使用ID。

Answer 2

如果您添加$post()代替警报，我有一个非常简单的评级系统，可以与PHP进行通信。需要注意的是星形图形是一个倒置的PNG。

.star {
    float: left;
    width: 21px;
    height: 20px;
    background-image: url('http://www.libertyeaglearms.com/graphics/star.png');
}

星星外面的区域是白色的，因此当您通过css更改背景颜色时，星形似乎会改变颜色。看一下，看看这是否适用于你。

<强> JSFIDDLE

评级明星剧本 - 不能再投票

2 个答案: