jQuery Raty 在点击事件中设置分数

Posted 2023-05-09

【中文标题】jQuery Raty 在点击事件中设置分数

【英文标题】：jQuery Raty set score inside click event

【发布时间】：2015-09-08 18:26:36

【问题描述】：

我正在尝试使用this 评分插件，但我无法在点击时设置新分数。

我正在对点击事件发出 ajax 请求并获得新的计算分数。我想在点击事件中设置新分数。正确的做法是什么？

<div class="rating" data-id="some-int" data-score="0.5"></div>

javascript：

$(".rating").raty(
    score: function ()  return $(this).attr("data-score"); ,
    click: function (score, evt) 
        $.ajax(
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "./ajax.asmx/RateImage",
            data: " ImgId: " + $(this).attr("data-id") + ", Score: " + score + "",
            dataType: "json",
            async: false,
            success: function (result)  actionResult = result.d; 
        );

        if (actionResult.Success) 
            console.log("Score: " + actionResult.Message);
            score = actionResult.Message;
         else  // cancel rating
            alert(actionResult.Message);
            return false;
        
    
);

【问题讨论】：

为什么要同步 (async: false)？为什么不是异步调用？像这样：jsfiddle.net/8kcu8qsr/2

你看到我链接的小提琴了吗？

@abhitalks 我不太了解异步的详细信息。如果设置为 true，则 actionResult 未定义。所以即使结果没有完成，ajax 块之后的代码也会继续运行。这不是我想要的。

要了解更多关于 AJAX、Async 以及如何使用返回值的信息，请参阅这个规范的 QA：***.com/q/14220321/1355315

很高兴知道。谢谢你。我会修复我的代码块。

【参考方案1】：

有一个内置的方法来设置新的分数，所以只需使用：

$('.rating').each(function(i) 
    var thisRating = $(this);
    thisRating.raty(
        score: function () 
            return $(this).data('score');
        ,
        click: function (score, evt) 
            $.ajax(
                type: 'post',
                contentType: 'application/json; charset=utf-8',
                url: './ajax.asmx/RateImage',
                data: 
                    ImgId: thisRating.data('id'),
                    Score: score
                ,
                dataType: "json",
                success: function (result) 
                    thisRating.raty('score', result.d.Message);
                
            );
            return false;
        
    );
);

在docs - Functions 下你会发现：

$('#star').raty('score');

获取当前分数。如果没有分数，则 undefined 将是 返回。

$('#star').raty('score', number);

设置分数。

【讨论】：

两者 $(this).raty("setScore", actionResult.Message);和 $(this).raty("score", actionResult.Message);工作，但问题是在此代码行之后设置了选定的值。所以我添加了 return false;以防止进一步的分配。谢谢。

【参考方案2】：

你可以的

$(".rating").raty('setScore', score);

看看效果

http://codepen.io/anon/pen/qdVQyO

【参考方案3】：

根据文档，您可以简单地使用$('#selector').raty(score: 3) 来设置分数。所以在回调中，你可以像这样调用$(".rating").raty(score: actionResult.Message)：

$(".rating").raty(
    score: function ()  return $(this).attr("data-score"); ,
    click: function (score, evt) 
        $.ajax(
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "./ajax.asmx/RateImage",
            data: " ImgId: " + $(this).attr("data-id") + ", Score: " + score + "",
            dataType: "json",
            async: false,
            success: function (result)  actionResult = result.d; 
        );

        if (actionResult.Success) 
            console.log("Score: " + actionResult.Message);
            $(".rating").raty(score: actionResult.Message);
         else  // cancel rating
            alert(actionResult.Message);
            return false;
        
    
);

【讨论】：

当我使用这个或 $(this).raty(score: actionResult.Message);元素重新初始化。所以我不能用这个。

@HasanGürsoy 元素重新初始化有什么问题？

它失去了所有的属性和事件。