設置HTML DIV類和設置DIV數據屬性在剃鬚刀使用jQuery查看

Question

我有一個HTML代碼片段像下面

<div class="child-station-sub child-station-sub1"> 
<h4><a href='#' class="child-station-opener station1 open" data-staion="NORTH_SOUTH_LINE">North - South Line</a></h4> 


<div class="child-station-sub child-station-sub2"> 
<h4><a href='#' class="child-station-opener station2 subdrop" data-staion="EAST_WEST_LINE">East - West Line</a></h4> 


<div class="child-station-sub child-station-sub3"> 
<h4><a href='#' class="child-station-opener station3 subdrop" data-staion="COST_WEST_LINE">Cost - West Line</a></h4> 

我試圖設置類和HTML數據上的屬性時，其裝載

於是，我就這樣做使用jQuery像下面

@foreach (var item in ViewBag.listGroups) 
{ 

     <div id="divstation" class="child-station-sub child-station-sub1"> 
     <p class="hidden">@item.ID</p> 
     <h4><a id="stationlg" href='#' class="child-station-opener station1 open" data-staion="EAST_WEST_LINE">@item.GroupName</a></h4>    

} 


<script type="text/javascript"> 
    $(document).ready(function() { 

     var idvalue = item.ID.ToString(); 

     if (idvalue == 1) { 
      alert('sample') 
      $('#divstation').attr('class', 'child-station-sub child-station-sub1'); 
      $('#stationlg').attr('class', 'child-station-opener station1 open'); 
      $('#stationlg').attr('data-staion', "NORTH_SOUTH_LINE"); 
     } 

     else if (idvalue == 2) { 
      $('#divstation').attr('class', 'child-station-sub child-station-sub2'); 
      $('#stationlg').attr('class', 'child-station-opener station2 subdrop'); 
      $('#stationlg').attr('data-staion', "EAST_WEST_LINE"); 
      }); 

     else if (idvalue == 3) { 
      $('#divstation').attr('class', 'child-station-sub child-station-sub3'); 
      $('#stationlg').attr('class', 'child-station-opener station3 subdrop'); 
      $('#stationlg').attr('data-staion', "COST_WEST_LINE"); 
      }); 
</script> 

但上面的嘗試不能正常工作，我該怎麼辦這裏

Answer 1

你可以做這樣的事情

@foreach (var item in ViewBag.listGroups) 
{ 
    string divClass; 
    string aClass; 
    string data; 

    switch(item.ID.ToString()) 
    { 
     case "1": 
      divClass = "appropriate class for div"; 
      aClass = "appropriate class for a"; 
      data = "appropriate data attribute"; 
     break; 

     /* other cases */ 
    } 

    <div id="divstation_@item.ID" class="@divClass"> 
    <p class="hidden">@item.ID</p> 
    <h4><a id="stationlg_@item.ID" href='#' class="@aClass" data-staion="@data">@item.GroupName</a></h4> 
} 

但它真的不應該做的方式。相反，你應該考慮使用視圖模型，並通過了所有這些數據，如從後端必要class和data-*值，這樣你就可以簡單地使這些項目

foreach(var item in Model.Items) 
{ 
    <div id="divstation_@item.Id" class="@item.DivStationClass"> 
     <p class="hidden">@item.Id</p> 
     <h4><a id="stationlg_@item.Id" href="#" class="@item.AnchorClass" data-station="@item.DataStation">@item.GroupName</a></h4> 
    </div> 
}