添加css類到一個MVC內部的jQuery的foreach循環

我想在我的模型中添加基於特定值的標題。

目前看起來像這樣。

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> 
      } 
     }

這似乎不工作，因爲它增加了大量的類的前2行，然後它似乎不會增加一個。

來源

2011-10-20 Puzzle84

這裏看起來有些不對，這當然不會執行，並且需要類似jQuery的ready（），但即使每個人都有jQuery.ready（），每次這個代碼對模型中的每個軌道執行時，它都會抓取任何具有「.model-attribute-wrapper」並將繼續添加類的東西。最後，最後一個將具有模型中先前執行的所有類的軌跡。

我認爲你需要處理的ID或東西每個軌道，而不是一般類「.MODEL屬性 - 包裝」

$(document).ready(function(){ 
    $("#trackid").addClass("G1"); // something like this 
});

來源

2011-10-20 22:52:17 Birey

其實我fixxed不同的看法。沒有涉及JavaScript。 'string style =「」; if（track.G1）{style =「G1」; } else if（track.Handicap）{style =「handicap」; } else if（track.Special）{style =「special」; } else if（track.BestRight）{style =「bestright」; } else if（track.Dirt）{style =「dirt」; } else if（even）{style =「even」; even = false;} else if（！even）{style =「odd」; even = true;}' 然後我在我的div類 – Puzzle84

中渲染這個字符串，這是好得多。 – Birey

您的問題有點令人困惑，但似乎您正嘗試在頁面中創建內容之前添加類。您需要使用jQuery.ready()函數等待在DOM準備好之前應用這些類。例如：

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

參考學習：jQuery .ready()

來源

2011-10-20 22:26:39

得到你的執行環境的句柄。

ASP東西在頁面呈現時在服務器上運行。

JavaScript東西在瀏覽器上運行（在頁面呈現完成後）。

此外，你所有的jQuery選擇器都是一樣的。

來源

2011-10-20 22:28:26 DwB

添加css類到一個MVC內部的jQuery的foreach循環

回答

相關問題