时间戳

首页 > 解决方案 > 无法在一个评级 div 上重置 Jquery Raty 的显示

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

问题描述

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

我将 lib 用于双重目的（请参阅Raty 使用示例图像）：

  1. 显示实体的只读“总”评级（即上图中的艺术家），以及
  2. 允许每个用户为每个艺术家设置/编辑他们自己的评级。

数据存储在数据库中，并在检索主记录时检索艺术家“总”评分。当登录的用户点击“总”评分（顶部的 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);

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

干杯...

标签： javascriptjqueryasp.net-coreraty

解决方案

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

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

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

干杯...

推荐阅读