Question

<!--language: lang-html--> 
@foreach (var book in Model.Category.Books)
   {

      <div class="rate-star-@book.Id"></div>
        <script>
          $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
        </script>

  }

有关我要执行的操作的简要说明： 循环中的此脚本代码是我需要为页面上的书实现的星级插件。这里的问题是，我需要在主体中进一步包含jquery代码，但是由于JQuery库的加载晚于脚本代码，因此出现“未定义$”错误。

我尝试了什么： 我试图在此页面上实施解决方案
[{Handling code which relies on jQuery before jQuery is loaded由 Ashkan Mobayen Khiabani 撰写。我将代码放在函数中。该函数在主体底部被调用。它应该被调用与每次迭代中创建的次数相同的次数。但是由于它仅在底部被调用一次，因此其他已创建的函数不会运行，因此只有一本书会受到该函数的影响。

 <!--language: lang-html--> 
    @foreach (var book in Model.Category.Books)
       {                  
          <div class="rate-star-@book.Id"></div>
            <script>
   function rateStar{
              $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
            </script>
           }                                   
      }

@section scripts
 { 
     <script>
 rateStar(); 
     </script>
}

那么该函数被调用的次数与在文档中创建的次数一样？

Answer 1

在Views/Shared中打开_Layout.cshtml，然后在head标签中创建一个脚本标签并创建一个数组（将其命名为postJquery：

<head>
...
   <script>var postJquery = [];</script>
...
</head>

现在在同一文件（_Layout.cshtml）中，移至底部并在body标签结束之前添加以下代码：

<script>for(var i=0;i<postJquery.length;i++) postJquery[i]();</script> //just ad this line
</body>

现在您需要在任何地方运行依赖于jquery的代码，只需将其添加到函数中并将其添加到postJquery数组中，它将在像这样加载jQuery后运行：

postJquery.push(function(){
    //your code goes here
});

例如，您的情况是：

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star-@book.Id"></div>
        <script>
          postJquery.push(function(){
              $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
          });
        </script>
       }                                   
  }

上面的代码可以很好地运行，但是我不喜欢脚本标记及其内容将针对每个书本重复，例如，如果您有20本书在循环中，以下代码将重复20次（当然，每本书的书号也会更改）：

<script>
     postJquery.push(function(){
          $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
     });
</script>

所以相反，我会做这样的事情：

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star" data-id="@book.Id"></div>
   }                                   
<script>
   postJquery.push(function(){
       $(".rate-star").stars({ stars:5, readonly:false});
   });
</script>

由于我不知道.stars是否应该在单个元素上使用（并且单击上面的代码会影响所有项目），您可以这样做：

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star" data-id="@book.Id"></div>
   }                                   
<script>
   postJquery.push(function(){
       $(".rate-star").each(function(){
            $(this).stars({ stars:5, readonly:false});
       });
   });
</script>

脚本代码不在foreach循环内运行？

1 个答案: