Question

我有评级星级，使用foreach需要addClass取决于从模型传递的值。即如果2（然后应用前2星级评级）

 foreach (var rev in Model.Reviews)
 {
   <p class="rating">  
   <span id="5" class="fa fa-star"></span>
   <span id="4" class="fa fa-star"></span>
   <span id="3" class="fa fa-star"></span>
   <span id="2" class="fa fa-star"></span>
   <span id="1" class="fa fa-star"></span>
   </p>

   <script>
       apply(@rev.Rating);
   </script>
 }

应用功能：

 <script type="text/javascript">
           function apply(r) {
               $('.rating span').each(function () {
                    if (this.id <= r) {
                        $(this).addClass("rated");
                    }
                });
            }
  </script>

问题例如：当rev.Rating为2时，addClass正确应用于两个id。但是当下一个值为4时，它会覆盖第一个，它将addClass应用于4星，然后接下来是4星。

这个问题会覆盖当前模型值的前一个星星。

我认为因为p class =“rating”是一样的。但我想如果我通过（这个）当前引用它应该覆盖其他元素。有什么想法吗？以及我如何解决它。

在视图中使用此代码，使用MVC

Answer 1

是的问题是你使用了apply方法，你可以使用一个dom ready回调函数来更新评级类，如下所示。

在每个rating元素中，您可以使用data-*值存储其初始值，该值可以在循环后用于dom ready处理程序。

此外，由于元素的ID必须是唯一的，因此您可以使用另一个data- *属性来存储span的值

＆＃13;

jQuery(function($) {
  $('.rating').each(function() {
    $(this).find('span').slice(-$(this).data('default-value')).addClass("rated");
  });
})

＆＃13;

.rated {
  border: 1px solid red;
}

＆＃13;

<p class="rating" data-default-value="2">
  <!-- data-default-value="@rev.Rating" -->
  <span data-value="5" class="fa fa-star"></span>
  <span data-value="4" class="fa fa-star"></span>
  <span data-value="3" class="fa fa-star"></span>
  <span data-value="2" class="fa fa-star"></span>
  <span data-value="1" class="fa fa-star"></span>
</p>
<p class="rating" data-default-value="4">
  <span data-value="5" class="fa fa-star"></span>
  <span data-value="4" class="fa fa-star"></span>
  <span data-value="3" class="fa fa-star"></span>
  <span data-value="2" class="fa fa-star"></span>
  <span data-value="1" class="fa fa-star"></span>
</p>

＆＃13;

所以

foreach (var rev in Model.Reviews)
 {
   <p class="rating" data-default-value="@rev.Rating"> 
       <span id="5" class="fa fa-star"></span>
       <span id="4" class="fa fa-star"></span>
       <span id="3" class="fa fa-star"></span>
       <span id="2" class="fa fa-star"></span>
       <span id="1" class="fa fa-star"></span>
   </p>
 }
<script>
    jQuery(function ($) {
        $('.rating').each(function () {
            $(this).find('span').slice(-$(this).data('default-value')).addClass("rated");
        });
    })
</script>

在foreach循环中调用JavaScript函数

1 个答案: