セットアップ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コードスニペットを持っています

は、だから私は、

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

に従うが試みの上に正常に動作していないようにjQueryを使ってこれを実行しようとした私はここ

を何ができます3210

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

ような何かを行うことができますしかし、それは実際にそれが行われる必要があります方法はありません。あなたは、単にので、それがどの意志重複IDを作成します、あなたがループ内の要素を作成しているこれらのアイテム

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