Question

您好我想在我的网页上放置评级星标。它工作正常。评级正在添加到数据库中但是用户可以一次又一次地评价。我希望明星应该在率一次后禁用。这是我的代码。请帮助我谢谢你。

<!DOCTYPE html>
<html lang="en">

<head>
<link href="http://online-btw-berekenen.nl/rating/rating.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://online-btw-berekenen.nl/rating/rating.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
    $("#rating_star").codexworld_rating_widget({
        starLength: '5',
        initialValue: '',
        callbackFunctionName: 'processRating',
        imageDirectory: 'images/',
        inputAttr: 'postID'
    });
});

function processRating(val, attrVal){
    $.ajax({
        type: 'POST',
        url: 'rating.php',
        data: 'postID='+attrVal+'&ratingPoints='+val,
        dataType: 'json',
        success : function(data) {
            if (data.status == 'ok') {
                alert('You have rated '+val+' to CodexWorld');
                $('#avgrat').text(data.average_rating);
                $('#totalrat').text(data.rating_number);
            }else{
                alert('Some problem occured, please try again.');
            }
        }
    });
}
</script>
<style type="text/css">
    .overall-rating{font-size: 14px;margin-top: 5px;color: #8e8d8d;}
</style>
</head>
<body style="background-color:black">
    <h1>Give us star</h1>
    <input name="rating" value="0" id="rating_star" type="hidden" postID="1" />
    <div class="overall-rating">(Average Rating <span id="avgrat"><?php echo $ratingRow['average_rating']; ?></span>
Based on <span id="totalrat"><?php echo $ratingRow['rating_number']; ?></span>  rating)</span></div>

</body>
</html>

点击并在javascript中悬停功能。

(function(a){
    a.fn.codexworld_rating_widget = function(p){
        var p = p||{};
        var b = p&&p.starLength?p.starLength:"5";
        var c = p&&p.callbackFunctionName?p.callbackFunctionName:"";
        var e = p&&p.initialValue?p.initialValue:"0";
        var d = p&&p.imageDirectory?p.imageDirectory:"images";
        var r = p&&p.inputAttr?p.inputAttr:"";
        var f = e;
        var g = a(this);
        b = parseInt(b);
        init();
        g.next("ul").children("li").hover(function(){
            $(this).parent().children("li").css('background-position','0px 0px');
            var a = $(this).parent().children("li").index($(this));
            $(this).parent().children("li").slice(0,a+1).css('background-position','0px -28px')
        },function(){});
        g.next("ul").children("li").click(function(){
            var a = $(this).parent().children("li").index($(this));
            var attrVal = (r != '')?g.attr(r):'';
            f = a+1;
            g.val(f);
            if(c != ""){
                eval(c+"("+g.val()+", "+attrVal+")")
            }
        });
        g.next("ul").hover(function(){},function(){
            if(f == ""){
                $(this).children("li").slice(0,f).css('background-position','0px 0px')
            }else{
                $(this).children("li").css('background-position','0px 0px');
                $(this).children("li").slice(0,f).css('background-position','0px -28px')
            }
        });
        function init(){
            $('<div style="clear:both;"></div>').insertAfter(g);
            g.css("float","left");
            var a = $("<ul>");
            a.addClass("codexworld_rating_widget");
            for(var i=1;i<=b;i++){
                a.append('<li style="background-image:url('+d+'/widget_star.gif)"><span>'+i+'</span></li>')
            }
            a.insertAfter(g);
            if(e != ""){
                f = e;
                g.val(e);
                g.next("ul").children("li").slice(0,f).css('background-position','0px -28px')
            }
        }
    }
})(jQuery);

Answer 1

好的，单击处理程序只需使用jquery off（）方法删除click事件侦听器。

Answer 2

在用户成功选择（并录制）评级后，有几个步骤可禁用点击和悬停事件：

在ajax成功中添加一行

success : function(data) {
    if (data.status == 'ok') {
        alert('You have rated '+val+' to CodexWorld');
        $('#avgrat').text(data.average_rating);
        $('#totalrat').text(data.rating_number);
        $('.codexworld_rating_widget').addClass('already_set');
    }else{...

然后添加一个功能来禁用每个悬停＆amp;点击“http://online-btw-berekenen.nl/rating/rating.js”脚本中的<li>。见下面的例子：

g.next("ul").children("li").hover(function(){
    if ('.codexworld_rating_widget.alreadyset') {
        $('.codexworld_rating_widget').off('click','li').off('hover','li');
    }else{

       // original script goes here
    });

});

无论如何，如果没有建造一个沙箱，我就无法测试它，所以...希望有助于指出你正确的方向。

一旦评级为

2 个答案: