在 foreach 循环中调用 JavaScript 函数

Question

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

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

问题是它用当前的模型值覆盖了以前的星星。

我觉得是因为pclass="rating"是一样的。但我想如果我通过（这个）当前参考它不应该覆盖其他元素。任何想法为什么？以及我如何解决它。

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

Answer 1

是的，问题是您使用了 apply 方法，您可以有一个 dom 准备好的回调，它将更新额定值 class，如下所示。

在每个 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>

在 foreach 循环中调用 JavaScript 函数

calling JavaScript function inside foreach loop

javascript

asp.net-mvc

jquery

javascriptmvc