无法在一个评级 div 上重置 Jquery Raty 的显示

Posted 2023-05-09

【中文标题】无法在一个评级 div 上重置 Jquery Raty 的显示

【英文标题】：Cannot reset display of Jquery Raty on one rating div

【发布时间】：2021-10-25 00:42:39

【问题描述】：

我已在我的 ASP.NET Core 应用程序中成功实现了 Raty 星级，但我遇到了一个似乎无法解决的问题。

我将 lib 用于双重目的（请参阅 Sample image of Raty usage）：

显示实体（即上图中的艺术家）的只读“总”评级，并且 允许每个用户为每个艺术家设置/编辑自己的评分。

数据存储在数据库中，并在检索主记录时检索艺术家“总”评分。当登录的用户点击“总”评分（顶部的 5 颗星）时，将显示一个引导 toast 弹出窗口，通过 AJAX 检索该艺术家的用户特定评分，并显示他们最后保存的评分（如果有）。一切都很好，包括如果他们更改评分并点击“更新”按钮，则将评分保存在数据库中。

但是......我似乎无法弄清楚如何更新“总”艺术家评级（顶部的星星）。第二个 AJAX 调用（当用户单击“更新”按钮时）更新数据库并返回新计算的“艺术家”总评分，但是当我尝试重置顶部的星星以正确显示新的艺术家“总”评分时，什么都没有发生。

有趣的是：我可以使用 $('.userRating').data('raty').score(RatingUserVal);重置原始用户评分（当用户显示弹出窗口时，更改他们的评分，不单击更新，而是单击“X”关闭弹出窗口）。因此，如果他们再次点击“总”评分，我只需通过 $('.userRating').data('raty').score(RatingUserVal); 重置用户评分；而且效果很好。

但是当我尝试对“总”评分做同样的事情时，它不起作用？？

下面是一些相关代码，所以也许有人可以指出我做错了什么。这是“总”艺术家评分的页面加载：

// Display the Artist 5-star "Rating" on page load.
$('.rating').raty(
       hints: ['', '', '', '', ''],
       readOnly: true,
       path: '/lib/raty-master/lib/images',
       score: $('input:hidden[name="RatingTotal"]').val()
);

这是当用户点击“只读”星标时（仅限第一次）并通过 AJAX 检索用户评分并显示在弹出窗口中：

$('.userRating').raty(
       hints: ['', '', '', '', ''],
       path: '/lib/raty-master/lib/images',
       score: $('input:hidden[name="RatingUser"]').val(),
       scoreName: 'RatingUser'
);

最后，当用户在弹出窗口中单击“更新”时，我通过 AJAX 更新数据库并获取重新计算的变量。但是当我尝试更新“总”评级（在顶部）时，什么也没有发生。这是代码，包括我用于数据库更新等的一些变量：

$('input:hidden[name="RatingTotal"]').val(response.data1);
$('input:hidden[name="RatingCount"]').val(response.data2);
$('input:hidden[name="RatingCountString"]').val(response.data3);
$('input:hidden[name="RatingUser"]').val(SelectedRatingUserVal);
$('.ratingCountDisplay').html('(' + response.data3 + ')');
$('.rating').data('raty').score(response.data1);

// NOTE: I tried using the‘move’ function too (instead of $('.rating').data('raty').score(response.data1);), but no success. 
$('.rating').data('raty').move(response.data1);

无论如何，我希望我的所有解释/代码/图像都会有所帮助，并且有人可以快速指出我的错误。

干杯...

【问题讨论】：

你能不能也给我们看看你的html/aspx页面部分

如果把readOnly: true,里面的$('.rating')去掉，还能用吗？

好电话@Yiyi You！我删除了 readOnly: true 并允许设置分数。问题是我需要 .rating 星是只读的，所以我只需在分数周围重置/设置 readOnly 属性就可以了。请参阅我添加的代码的答案。

【参考方案1】：

在@Yiyi You 的建议下，解决方案是在设置“.rating”分数时切换 readOnly 属性。显然，当“.rating”处于只读模式时，它不会让您重置星显示。因此解决方案是：

 $('.rating').data('raty').readOnly(false);
 $('.rating').data('raty').score(response.data1);
 $('.rating').data('raty').readOnly(true);

简单而优雅。再次感谢您的建议，希望这对其他人有所帮助。

干杯...