在 MVC 中使用 jquery 在 foreach 循环中更改 CSS 类答案

【问题标题】：Changing CSS class in foreach loop using jquery in MVC在 MVC 中使用 jquery 在 foreach 循环中更改 CSS 类
【发布时间】：2016-12-14 20:07:28
【问题描述】：

谁能帮我完成这个任务

@foreach (var item in Model.Premium)
{
    <div class="col-md-2">
        <div id="test" class="panel">
            <div class="panel-heading text-center">
                 <h1 class="panel-title" style="font-size:x-large;font-weight:400">
                      @item.year
                 </h1>
             </div>
             <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
                 $@item.price
             </div>
         </div>
     </div>

     <script>
         var year = @item.cy_year;
         var OddOrEven = year % 2;

         if (OddOrEven = 0) {
              $('#test').addClass("panel-default");
         }
         else 
         {
              $('#test').addClass("panel-info");
         }
     </script>
}

在这段代码中，我从表格中获取年份和价格列表。我想要的是每年在引导面板中添加它的价格，然后检查面板是奇数还是偶数。对于所有奇数面板，我想添加引导类"panel-default"，对于所有偶数面板，我想添加引导类"panel-info"。

谢谢

【问题讨论】：

您是否尝试根据年份是奇数还是偶数，或者列表中的数字是奇数还是偶数来应用不同的值？
我正在尝试基于年份是偶数还是奇数。
让它 == 或 === 而不是 =
对不起，我正在尝试根据列表中的数字添加是奇数还是偶数

标签： javascript jquery css asp.net-mvc twitter-bootstrap

【解决方案1】：

问题在于您的 jQuery，它以 ID 为“test”的元素为目标，但在每次迭代中您输出相同的 ID，因此 jQuery 无法检测到您想要定位的元素。您实际上不需要任何 javascript。

在您的代码中，您根据项目的年份计算奇数或偶数，实际上您可以只使用迭代器上的计数。如果您确实想使用年份，只需替换

@Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")

与

@Html.Raw(@item.cy_year % 2 == 0 ? "panel-default" : "panel-info")

代码如下：

@{int i = 0;}
    @foreach (var item in Model.Premium)
    {
        <div class="col-md-2">
            <div class="panel @Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")">
                <div class="panel-heading text-center">
                    <h1 class="panel-title" style="font-size: x-large; font-weight: 400">@item.year</h1>
                </div>
                <div class="panel-body text-center" style="font-size: x-large; font-weight: 300"> $@item.price</div>
            </div>
        </div>
        i++;
    }

【讨论】：

【解决方案2】：

我建议这样做。而是为每个项目添加 JavaScript。

@foreach (var item in Model.Premium)
{
<div class="col-md-2">
  <div id="test" class="panel @((item.cy_year % 2 == 0) ? "panel-default" : "panel-info")">
    <div class="panel-heading text-center">
      <h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1>
    </div>
    <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
    $@item.price
    </div>
  </div>
</div>
}

【讨论】：

【解决方案3】：

还有几个问题

您在 for 循环中的标签上声明了一个 id 字段，这将给出多个标签同一个id。
在底部的 if 语句中，您正在执行赋值而不是比较

这是你如何在剃须刀中做到这一点

@foreach (var item in Model.Premium)
{
var classForDiv = "panel-info";
if(item.cy_year % 2 == 0) {
    classForDiv = "panel-default";
}
<div class="col-md-2">
<div id="test" class="panel @classForDiv"> // Need to change the id to be unique for each iteration
 <div class="panel-heading text-center">
<h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1></div>
<div class="panel-body text-center" style="font-size:x-large;font-weight:300"> $@item.price</div>
</div>
</div>
}

【讨论】：