添加动态 CSS 类 MVC Razor 视图答案

【问题标题】：Add Dynamic CSS Class MVC Razor View添加动态 CSS 类 MVC Razor 视图
【发布时间】：2014-07-09 04:44:39
【问题描述】：

我需要帮助以在 MVC Razor 视图标记中动态更改 3 个标记。 html标记如下

奇怪

<li class="active">
  <div class="widget widget-heading-simple">
    <div class="widget-body">
      <div class="row"> 
        <div class="col-md-4 center">
          <a href="" class="thumb">
            <img src="/@item.image" class="img" alt="Image" />
          </a>
        </div>
        <div class="col-md-8 padding-none">
          <h5 class="strong text-uppercase">@item.title</h5>
          <div class="separator bottom">
          </div>
          <p>@Html.Raw(Html.Truncate(item.Text, 20, "...."))</p>
        </div>
      </div>
    </div>
  </li>

甚至

<li class="active">
  <div class="widget widget-heading-simple">
    <div class="widget-body">
      <div class="row"> 
        <div class="col-md-8 center">
          <a href="" class="thumb">
            <img src="/@item.image" class="img" alt="Image" />
          </a>
        </div>
        <div class="col-md-4 padding-none">
          <h5 class="strong text-uppercase">@item.title</h5>
          <div class="separator bottom">
          </div>
          <p>@Html.Raw(Html.Truncate(item.Text, 20, "...."))</p>
        </div>
      </div>
    </div>
  </li>

我需要将类交替或注入到连续行的 div 中（即奇数和偶数）
例如奇数行

<div class="widget widget-heading-simple widget-body-white "> ,<div class="col-md-4 center">  and <div class="col-md-8 padding-none">

对于偶数行

<div class="widget widget-heading-simple  widget-body-gray">,<div class="col-md-8 center">  and <div class="col-md-4 padding-none">

我已经尝试了如下的jQuery

<script type="text/javascript">
        $(document).ready(function () {
            $('.widget:first').addClass('widget-body-white');
            $('.widget:second').addClass('widget-body-gray');

        });
  </script>

无济于事，我也不知道如何设置 col-md- 4 或 8 要求。任何帮助将不胜感激

【问题讨论】：

你已经嵌套了 class="widget" 的 div，你如何设置交替的灰白背景颜色？
是的，我还必须交替
和
到
和

标签： jquery html css asp.net-mvc-4 razor

【解决方案1】：

试试这个：

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white');
    $('.widget:odd').find('[class^=col-md]:first').attr('class','col-md-4 center');
    $('.widget:odd').find('[class^=col-md]:last').attr('class','col-md-8 padding-none');

    $('.widget:even').addClass('widget-body-gray');
    $('.widget:odd').find('[class^=col-md]:last').attr('class','col-md-4 center');
    $('.widget:odd').find('[class^=col-md]:first').attr('class','col-md-8 padding-none');
});

Demo

【讨论】：

感谢如果奇数是 col-md-4 中心和 .col-md-8 padding-none 偶数变成 col-md-8 中心和 col-md-4 padding-none 4 和 8 交换奇偶之间的位置
我现在有一个想法，必须删除 4 并添加 8，反之亦然，奇数和偶数，但如果你要编辑你的答案，我想给你功劳
您想将 div 4 放入奇数 .widget 并将 div 8 放入偶数吗？像这样jsfiddle.net/9bShX/42
col-md 从左到右交替显示图像。我为 col-md 添加了奇偶场景 - 澄清

【解决方案2】：

试试这个

$('.widget:odd').addClass("widget-body-white")
$('.widget:even').addClass("widget-body-gray")

参考Select odd/even child divs

【讨论】：

谢谢，我还得把
和
换成
和

【解决方案3】：

试试这个方法

$(document).ready(function () {
    $('div.widget').filter(":odd").addClass('widget-body-white');
    $('div.widget').filter(":even").addClass('widget-body-gray');

});

【讨论】：

【解决方案4】：

试试odd and even selectors:

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white');
    $('.widget:even').addClass('widget-body-gray');
});

您也可以使用nth-child selector：

$('li.active:nth-child(odd)').addClass('widget-body-white');
$('li.active:nth-child(even)').addClass('widget-body-gray');

编辑如果您需要添加多个类，只需相应地编辑addClass() 函数。来自文档：$( "p" ).addClass( "myClass yourClass" );

所以在你的情况下：

$(document).ready(function () {
    $('.widget:odd').addClass('widget-body-white  col-md-4 center');
    $('.widget:even').addClass('widget-body-gray  col-md-8 padding-none');
});

【讨论】：

谢谢，我还得把
和
换成
和