Question

我正在使用此插件https://danielupshaw.com/jquery-star-rating/

我想重置我的表单。但是我怎样才能重置这些星星？

 $("#btn-reset").on('click', function() {
  //some other inputs reset
  $('#starrating').star_rating.remove();
  $('#starrating').star_rating.reload();
 }

请帮助您了解如何将这些星重置为零或无效。

这是完整的代码。

 $("#btn-reset").on('click', function() {
   $('#starrating').star_rating.reload();
});
  jQuery(function($) {
    $('#starrating').star_rating({
        click: function(clicked_rating, event) {
            event.preventDefault();
            $('input[name=\'rating\']').val(clicked_rating);
            this.rating(clicked_rating);
        }
    });
});

Answer 1

我不知道这是不是最好的方法，因为我不熟悉这个库......

但我实现了这样的重置：

$(document).ready(function(){
  $('.rating').star_rating();


  $("#resetStars").on("click",function(){
    $(".rating").remove();
    $('.star-rating').replaceWith("<span class='rating'>0/10 stars</span>");
    $(".rating").text("0/10").star_rating();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://danielupshaw.com/jquery-star-rating/jquery.star-rating.js"></script>


<h1>This is a good script!</h1>
<span class="rating">9.5/10 stars</span><br>
<br>
<br>
<button id="resetStars">Reset stars</button>

Answer 2

看起来您需要做的就是将内容设置为0.然后重新初始化方法。

int main(int argc, char **argv) {
constants c;
for (int i=0; i<argc; i++) {
    if ( (argv[i])[0] == '-') {
        if ((argv[i])[1] == 'h'){
            bHelp = true;
            //spit out some help text here
        }
        else if ((argv[i])[1] == 'c' && (argv[i+1]) != nullptr){
            c.host = argv[i+1];
        }
        else if ((argv[i])[1] == 'd' && (argv[i+1]) != nullptr){
            c.databasename = argv[i+1];
        }
        else if ((argv[i])[1] == 'w' && (argv[i+1]) != nullptr){
            c.password = argv[i+1];
        }
        else if ((argv[i])[1] == 'u' && (argv[i+1]) != nullptr){
            c.username = argv[i+1];
        }
        else if ((argv[i])[1] == 'p' && (argv[i+1]) != nullptr){
            c.port = argv[i+1];
        }
    }
}
if (bHelp) {exit(1);}

Answer 3

我不熟悉这个插件，但是看看你提供的链接，你不能只更新元素里面的文字以反映空的或零评级吗？类似的东西：

$("#btn-reset").on('click', function() {
     $('#starrating').text('0/5').star_rating();
}

Answer 4

你可以尝试这样的事情;尝试在初始页面加载时设置默认空白星标，或单击。

$(document).ready(function() {
    $('i').addClass('fa-star-o');
});

然后刷新页面休息：

$( ".reset" ).click(function() {
    location.reload();
});

如果您不想刷新页面，可以尝试：

$( ".reset" ).click(function() {
   $('i').addClass('fa-star-o');
});

您可能需要使用类似的jQuery重新启动星号上的点击功能，以便在需要时重新添加相应的类。

如果这没有帮助或工作;你能创建一个https://jsfiddle.net/来完全复制你的问题吗？然后我们可以解决它。 如果是我的话;我会找到一个更好的插件来使用，或者只是从头开始编写它。

Answer 5

使用自定义renderRating功能从头开始重新渲染评级星的另一种方法。

<强> HTML：

<div class="rating-stars"></div>
<button class="reset-rating">Reset rating</button>

<强> JS：

var defaultRating = "0/5";

renderRating("3/5");

function renderRating(rating) {
  var ratingEl = $('<span />').addClass('rating');
  var ratingStr = rating || defaultRating;

  ratingEl.text(ratingStr);
  $('.rating-stars').html(ratingEl);
  ratingEl.star_rating();
}

$('.reset-rating').on('click', function() {
  renderRating();
})

Preview on JSFiddle

Answer 6

这应该将其重置为0：

$('#starrating').star_rating('rating', 0);

以下是调用公共方法的格式：

$('#starrating').star_rating('method_name');

您的点击事件是否准备好在文件内？如果它在文档外部准备就绪，那么有时会导致问题。我希望这会有所帮助：）

jQuery重置star-rating.js

6 个答案: