MVC评级Bootstrap Jquery取消选中明星

时间:2017-04-21 18:53:42

标签: javascript jquery css twitter-bootstrap

我正在使用MVC进行Rating Bootstrap申请。

<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>

仍然没有发生任何事情。

可以吗?

由于

1 个答案:

答案 0 :(得分:1)

  

我试过但没有发生任何事情:

$('#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>

相关问题