jquery - 每秒添加 li with active class, different background

Question

我正在尝试为使用 <li> 列出的每个第二个事件类添加不同的背景有 下面的代码显示不同的 div点击功能。 active我用 jQuery 添加的类，然后我尝试为 div 2、4、6 添加不同的背景......

我试过使用 css，但对我不起作用:

$(document).ready(function() {
  $('.results > li').hide();

  $('div.tags').find('input:checkbox').on('click', function() {
    $('.results > li').hide();
    $('div.tags').find('input:checked').each(function() {
      $('.results > li.' + $(this).attr('rel')).show();
    });
  });
  if (!$('.results > li').css('display') == 'none') {
    $('.results > li').addClass('active');
  }
});

ul.results li.nth-child(even) .active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
  <label>
            <input type="checkbox" rel="arts" />
            Arts
        </label>
  <label>
            <input type="checkbox" rel="computers" />
            Computers
        </label>
  <label>
            <input type="checkbox" rel="health" />
            Health
        </label>
  <label>
            <input type="checkbox" rel="video-games" />
            Video Games
        </label>
</div>
<ul class="results">
  <li class="arts computers">Result 1</li>
  <li class="video-games">Result 2</li>
  <li class="computers health video-games">Result 3</li>
  <li class="arts video-games">Result 4</li>
</ul>

示例:如果选中复选框 Art 和 h Health，它们将显示结果 1、结果 3、结果 4。在这种情况下，结果 3 的背景应该是红色。 https://jsfiddle.net/nanoquantumtech/Ddnuh/

Answer 1

首先，你的CSS有问题。 nth-child 是一个伪选择器，而不是一个类。此外，它 doesn't work in conjunction with classes 。

您需要使用 JavaScript 来完成此操作。我确信代码可以优化，但我将把它留给你去弄清楚。这些是我要执行的步骤:

1. 在每次点击复选框时重置所有 li 的状态
2. 为所有可见的 li 添加一个名为 active 的类
3. 为所有偶数编号的 active li 添加一个 highlight 类。代码使用 :odd 因为这个自定义 jQuery 选择器是 0 索引的

$(document).ready(function() {
  $('.results > li').hide();

  $('div.tags').find('input:checkbox').on('click', function() {
    $('.results > li').hide().removeClass('highlight active');

    $('div.tags').find('input:checked').each(function() {
      $('.results > li.' + $(this).attr('rel')).show().addClass('active');
    });

    $('.active:odd').addClass('highlight')
  });
});

.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
  <label>
            <input type="checkbox" rel="arts" />
            Arts
        </label>
  <label>
            <input type="checkbox" rel="computers" />
            Computers
        </label>
  <label>
            <input type="checkbox" rel="health" />
            Health
        </label>
  <label>
            <input type="checkbox" rel="video-games" />
            Video Games
        </label>
</div>
<ul class="results">
  <li class="arts computers">Result 1</li>
  <li class="video-games">Result 2</li>
  <li class="computers health video-games">Result 3</li>
  <li class="arts video-games">Result 4</li>
</ul>