设置HTML DIV类和设置DIV数据属性在剃须刀使用jQuery查看

问题描述：

我有一个HTML代码片段像下面设置HTML DIV类和设置DIV数据属性在剃须刀使用jQuery查看

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

但上面的尝试不能正常工作，我该怎么办这里

你是在一个循环中创建元素，因此它会创建重复的ID这将在HTML中渲染无效的HTML __Identifiers必须是唯一的_ – Satpal

这不是纯HTML，这实际上是cshtml –

@kelumpriyadarshane它仍然会为多个元素创建相同的ID，这是一个很大的禁忌。 – Carcigenicate

答

你可以做这样的事情

@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="[email protected]" class="@divClass"> 
    <p class="hidden">@item.ID</p> 
    <h4><a id="[email protected]" href='#' class="@aClass" data-staion="@data">@item.GroupName</a></h4> 
}

但它真的不应该做的方式。相反，你应该考虑使用视图模型，并通过了所有这些数据，如从后端必要class和data-*值，这样你就可以简单地使这些项目

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

设置HTML DIV类和设置DIV数据属性在剃须刀使用jQuery查看

相关推荐