javascript - MVC 评级 Bootstrap Jquery 取消选择星星选择

Question

我正在用 Rating Bootstrap 做一个 MVC 应用程序。

<input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false" min=0 max=5 step=1 data-glyphicon="false" data-size="sm">

我也定义了这个...为了知道点击了多少开始。

 $(document).ready(function () {
        $("#input-21b").on("rating.change", function (event, value, caption) {
            $('#hdfRatingValue').val(value);

    });

我有一个隐藏的输入来保持选择开始。

它工作正常......

当用户点击“确定”按钮时，Ajax 函数被调用以保存评分。

我需要的是 UnSelect 通过 Jquery 选择的开始....

我试过了

  $('#input-21b').rating({
            'update': 0,
            'showCaption': false,
            'showClear': false
        });

它说的是 Bootstrap-star-rating set default stars

但是什么也没发生。我还包括

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--  required libraries  -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>

仍然没有任何反应。

这可能吗？

谢谢

Answer 1

I tried But Nothing happend:

$('#input-21b').rating({
    'update': 0,
    'showCaption': false,
    'showClear': false
});

update是一种方法，您不能在初始化时使用它。此外，您不需要初始化，因为您在 HTML 中指定了所有属性。

如果你想使用那个方法你必须写:

$('#input-21b').rating('update', 0).trigger('rating.change');

但是你也可以直接reset评级为其初始值:

$('#input-21b').rating('reset').trigger('rating.change');

为什么需要 trigger事件 rating.change？因为通过这种方式您可以执行相关的事件处理程序(即:将值复制到您的隐藏字段)。

$(document).ready(function () {
  $("#input-21b").on("rating.change", function (event, value, caption) {
      $('#hdfRatingValue').val(value);
  });
  $('button').on('click', function(e) {
      //$('#input-21b').rating('update', 0).trigger('rating.change');
      $('#input-21b').rating('reset').trigger('rating.change');
  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--  required libraries  -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script>

<div class="container">
    <form>
        <div class="form-group">
            <label for="input-21b">Rating:</label>
            <input id="input-21b" type="number" class="rating" data-show-clear="false" data-show-caption="false"
                   min=0 max=5 step=1 data-glyphicon="false" data-size="sm">
        </div>
        <div class="form-group">
            <label for="input-21b">Rating Value:</label>
            <input id="hdfRatingValue" type="text">
        </div>
        <button type="button" class="btn btn-primary">Reset rating</button>
    </form>
</div>