1

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

$(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>
4

2 回答 2

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。

于 2013-08-22T14:32:01.687 回答
0

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

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

星星外面的区域是白色的，所以当您通过 css 更改背景颜色时，星星似乎会改变颜色。看看这是否对你有用。

JSFIDDLE

于 2013-08-22T22:54:58.973 回答