Javascript 在MVC foreach循环中使用jquery向div添加css类

正如标题所述

我试图根据模型中的某些值添加标题

现在看起来像这样

foreach (var track in Model)
        {
            if (track.G1)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("G1");
                </script>
            }
            else if (track.Handicap)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("handicap");
                </script>
            }
            else if (track.Special)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("special");
                </script>
            }
            else if (track.BestRight)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("bestright");
                </script>
            }
            else if (track.Dirt)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("dirt");
                </script>
            }
            if (even)
            {
                even = false;

                <div class="model-attribute-wrapper even">
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
            else
            {
                even = true;
               <div class="model-attribute-wrapper odd"> 
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
        }

foreach（模型中的var轨迹）
{
如果（轨道G1）
{ 
jQuery（“.model属性包装器”）.addClass（“G1”）；
}
否则如果（赛道障碍）
{ 
jQuery（“.model属性包装器”）.addClass（“障碍”）；
}
else if（轨道特殊）
{ 
jQuery（“.model属性包装器”）.addClass（“特殊”）；
}
else if（track.BestRight）
{ 
jQuery（“.model属性包装器”）.addClass（“bestright”）；
}
否则，如果（履带、泥土）
{ 
jQuery（“.model属性包装器”）.addClass（“污垢”）；
}
如果（偶数）
{
偶数=假；
@DisplayFor（modeleItem=>track.Id）
@DisplayFor（modeleItem=>track.Name）
@DisplayFor（modelItem=>track.display）
@DisplayFor（modeleItem=>track.Special）
@DisplayFor（modeleItem=>track.Dirt）
@DisplayFor（modeleItem=>track.BestRight）
@DisplayFor（modeleItem=>track.G1）
@DisplayFor（modelItem=>track.Distance）
@ActionLink（“编辑”，“编辑”，新的{id=track.id}）
@ActionLink（“删除”，“删除”，新建{id=track.id}）
}
其他的
{
偶数=真；
@DisplayFor（modeleItem=>track.Id）
@DisplayFor（modeleItem=>track.Name）
@DisplayFor（modelItem=>track.display）
@DisplayFor（modeleItem=>track.Special）
@DisplayFor（modeleItem=>track.Dirt）
@DisplayFor（modeleItem=>track.BestRight）
@DisplayFor（modeleItem=>track.G1）
@DisplayFor（modelItem=>track.Distance）
@ActionLink（“编辑”，“编辑”，新的{id=track.id}）
@ActionLink（“删除”，“删除”，新建{id=track.id}）
}
}

---

这似乎不起作用，因为它在前两行中添加了大量的类，然后似乎逐渐没有添加任何类。

您的问题有些令人困惑，但似乎您正在尝试在页面中创建内容之前添加类。您需要使用

jQuery.ready（）

函数等待应用类，直到DOM就绪。例如：

jQuery(function(){
   jQuery(".model-attribute-wrapper").addClass("G1");
});

---

学习参考：

您的问题有点让人困惑，但似乎您试图在页面中创建内容之前添加这些类。您需要使用

jQuery.ready（）

函数等待应用类，直到DOM就绪。例如：

jQuery(function(){
   jQuery(".model-attribute-wrapper").addClass("G1");
});

---

学习参考：

掌握您的执行环境

呈现页面时，ASP stuff将在服务器上运行

JavaScript在浏览器上运行（在页面呈现完成之后）

---

此外，所有jQuery选择器都是相同的。

获得执行环境的句柄

呈现页面时，ASP stuff将在服务器上运行

JavaScript在浏览器上运行（在页面呈现完成之后）

---

另外，所有的jQuery选择器都是相同的。

这里似乎有问题，这当然不会执行，需要类似jQuery的ready（），但即使每个选择器都有jQuery.ready（），每次对模型中的每个轨迹执行此代码时，它都会抓取具有“.Model属性包装器”的任何内容并将继续添加该类。 最后，最后一个将在模型中包含以前执行的轨迹的所有类

我认为您需要通过id或其他方式来处理每个曲目，而不是通过泛型类“.model attribute wrapper”

---

这里似乎有点不对劲，这当然不会执行，需要像jQuery的ready（）这样的东西，但即使每一个都有jQuery.ready（），每次对模型中的每个轨迹执行这段代码时，它都会抓取任何有“.Model attribute wrapper”的东西，并继续添加类。 最后，最后一个将在模型中包含以前执行的轨迹的所有类

我认为您需要通过id或其他方式来处理每个曲目，而不是通过泛型类“.model attribute wrapper”

---

事实上，我用了不同的方法来修复它。没有涉及javascript<代码>字符串样式=”；if（track.G1）{style=“G1”}else if（track.disability）{style=“disability”}else if（track.Special）{style=“Special”}else if（track.BestRight）{style=“BestRight”}else if（track.Dirt）{style=“dirty”}else if（偶数）{style=“偶数”；偶数=false；}否则如果（！偶数）{style=“odd”；偶数=true；}然后我在我的div classi中呈现这个字符串，我实际上以不同的方式修复了它。没有涉及javascript<代码>字符串样式=”；if（track.G1）{style=“G1”}else if（track.disability）{style=“disability”}else if（track.Special）{style=“Special”}else if（track.BestRight）{styl