javascript - 在 foreach 循环中调用 JavaScript 函数

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 在 View 中使用此代码

Answer 1

是的，问题是您使用了 apply 方法，您可以有一个 dom 就绪回调，它将更新评级类，如下所示。

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

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

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

.rated {
  border: 1px solid red;
}

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

<小时/>

所以

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>