脚本代码不在foreach循环内运行？
[英]script code doesn't run inside foreach loop?
问题描述
<!--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>
}
A brief explanation about what I'm trying to do: This script code inside the loop is one of the star rating plugins that I need to implement for books on the page. 
关于我要执行的操作的简要说明：循环中的此脚本代码是我需要为页面上的书实现的星级插件之一。 The problem here is that I need to include jquery code further up in the body but since JQuery library loads later than the script code, I get "$ is not defined" error. 这里的问题是我需要在主体中进一步包含jquery代码，但是由于JQuery库的加载晚于脚本代码，因此出现“未定义$”错误。
What Have I tried: I tried to implement the solution on this page 我尝试了什么：我尝试在此页面上实施解决方案
[ Handling code which relies on jQuery before jQuery is loaded written by Ashkan Mobayen Khiabani . [ 处理依赖于jQuery的代码之前由Ashkan Mobayen Khiabani编写 。 I put the code inside a function. 我将代码放在函数中。 The function is called at the bottom of the body. 该函数在主体底部被调用。 It is supposed to be called as many times as it's created in per iteration. 它应该被调用与每次迭代中创建的次数相同的次数。 But since it's called only once at the bottom the other created functions don't run and only one book gets affected by the function as a result. 但是由于只在底部调用了一次，所以其他已创建的函数不会运行，因此只有一本书会受到该函数的影响。
<!--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>
}
So how to do that function gets called as many times as it's created in the document? 那么该函数如何被调用与在文档中创建函数一样多？
1 个解决方案
解决方案1
1 已采纳 2019-04-08 15:14:14
in Views/Shared open _Layout.cshtml and in the head tag create a script tag and create an array (lets name it postJquery : 在Views/Shared打开_Layout.cshtml并在head标签中创建一个script标签并创建一个数组（将其命名为postJquery ：
<head>
...
<script>var postJquery = [];</script>
...
</head>
Now in the same file ( _Layout.cshtml ) go to the bottom and add this code before ending of body tag: 现在，在同一文件（ _Layout.cshtml ）中，移至底部并在body标签结束之前添加以下代码：
<script>for(var i=0;i<postJquery.length;i++) postJquery[i]();</script> //just ad this line
</body>
Now anywhere that you need to run a code that depends on jquery just add it to a function and add it to postJquery array and it will run after jQuery is loaded like this: 现在，您需要运行依赖于jquery的代码的任何地方，只需将其添加到函数中并将其添加到postJquery数组中，它将在像这样加载jQuery后运行：
postJquery.push(function(){
//your code goes here
});
for example, your case would be: 例如，您的情况将是：
@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>
}
}
The code above will run just fine, but there is what I don't like about it that the script tag and its content will be repeated for each book item, for example, if you have 20 books in your loop, the following code will be repeated 20 times (of course book id will change for each one): 上面的代码可以很好地运行，但是我不喜欢脚本标记及其内容会针对每本书重复执行，例如，如果您的循环中有20本书，则以下代码将重复20次（当然，每本书的ID都会改变）：
<script>
postJquery.push(function(){
$(".rate-star-@book.Id").stars({ stars:5, readonly:false});
});
</script>
So instead I would do something like this: 所以我会做这样的事情：
@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>
As I don't know about .stars if it should be used on a single element (and clicking on above code effects all items) you could do it like this: 我不知道.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.