Question

我有一个div的列表，这些div是斑马纹在css中（奇数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');
}

Answer 1

对于css中的奇数，只需要更具体的.selectedRow：

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

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

Answer 2

您在点击功能中引用了错误的类。此外，它仅适用于偶数行的原因是因为第n个子（奇数）样式覆盖了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不能使用。

Jquery：改变斑马条纹div的背景颜色？

2 个答案: