时间戳

首页 > 解决方案 > 用户星级评分在 Angular 5 中不起作用

javascript - 用户星级评分在 Angular 5 中不起作用

问题描述

我的 HTML 代码：

<div class="col-md-4">
  <div class="star-rating">
    <span class="fa fa-star-o" data-rating="1"></span>
    <span class="fa fa-star-o" data-rating="2"></span>
    <span class="fa fa-star-o" data-rating="3"></span>
    <span class="fa fa-star-o" data-rating="4"></span>
    <span class="fa fa-star-o" data-rating="5"></span>
    <input type="hidden" name="whatever1" class="rating-value" value="2.56">
  </div>
</div>

CSS 代码：

.star-rating { line-height:32px; font-size:1.25em; } .star-rating .fa-star{color: yellow;} JS:

JS代码：

<script>
  var $star_rating = $('.star-rating .fa');

  var SetRatingStar = function () {
    return $star_rating.each(function () {
      if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
        return $(this).removeClass('fa-star-o').addClass('fa-star');
      } else {
        return $(this).removeClass('fa-star').addClass('fa-star-o');
      }
    });
  };

  $star_rating.on('click', function () {
    $star_rating.siblings('input.rating-value').val($(this).data('rating'));
    return SetRatingStar();
  });

  SetRatingStar();
  $(document).ready(function () {

  });
</script>

我想在我的应用程序中显示用户评分。使用此代码时仅显示星号。当用户单击星号对其不工作进行评分时。这里出了什么问题。我目前在角度 5 中尝试此代码。如何实现这一点?

标签： javascriptangular

解决方案

推荐阅读