Jquery：更改斑马条纹div的背景颜色？答案

【问题标题】：Jquery: change background color of zebra striped divs?Jquery：更改斑马条纹div的背景颜色？
【发布时间】：2015-06-22 16:30:22
【问题描述】：

我有一个在 css 中带有斑马条纹的 div 列表（奇数 div 具有浅灰色背景）。单击时，我希望 div 的背景变为蓝色。下面的代码仅在我单击偶数 div 时才有效，大概是因为斑马条纹比我使用addClass 添加的类具有更高的特异性。在我的 css 文件中交换 div.row 和 selected_row 选择器的顺序没有区别。

div.row div:nth-child(odd) {
  background-color: #fafafa;
}

.selectedRow {
    background-color: #338FFF;
}

$('.js-div').on('click', function (e) {
  $(e.toElement).addClass('selected_color');
}

【问题讨论】：

也发布 HTML。
试试 .selectedRow {background-color: #338FFF !important;}
你有没有试过 !important 指令对 CSS 或 .removeClass("row").addClass("selectedRow");
我不能使用 !important （因为设计标准）。也许用第 n 个子选择器来做斑马条纹是不可能的？（我可以在 php 中完成）

标签： jquery html css

【解决方案1】：

只需为您的 CSS 中的奇数设置一个更具体的 .selectedRow：

.selectedRow,
div.row div.selectedRow:nth-child(odd) {
    background-color: #338FFF;
}

演示 http://jsfiddle.net/jh602sxk/1/

【讨论】：

【解决方案2】：

您在 click 函数中引用了错误的类。此外，它仅适用于偶数行的原因是因为 nth-child(odd) 样式覆盖了 selectedRow 类。

$('.js-div').click(function(e) {
  if(!$(this).hasClass('selectedRow')) {
      $(this).addClass('selectedRow')
      $(this).css('background-color', '#338FFF');
  } else {
      $(this).removeClass('selectedRow')
      $(this).removeAttr('style');
  }
})

.js-div {
    width:100%;
    height:40px;
}

div.row div:nth-child(odd) {
  background-color: #fafafa;
}

.selectedRow {
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
    <div class="js-div"></div>
</div>

编辑：以替代方式添加，因为 !important 不能使用。

【讨论】：