如何使用 JavaScript 和 Nth-Last-Child 添加和删除 CSS 类？答案

【问题标题】：How do I use JavaScript and Nth-Last-Child to add and remove CSS classes?如何使用 JavaScript 和 Nth-Last-Child 添加和删除 CSS 类？
【发布时间】：2016-02-24 15:36:22
【问题描述】：

无论如何，我都不是 JavaScript 向导，但我试图找出一种使用 JavaScript 的方法，只需单击一个按钮即可在一系列 DIV 中添加和删除类。假设我有一个列表：

<div id="homepage">
 <div class="hpFeature"></div> 
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
</div>

<button class="featureButton">Click Here</button>

我的默认 CSS 用于渐进增强，因此至少有一张图片显示为后备：

.hpFeature:nth-child(1) {display:block;}
.hpFeature {display:none;}
.fide {position: absolute; left:-9999px;}

...到目前为止，我的 JavaScript 是这样的：

var count = $('.hpFeature').length;

$(document).ready(function () {
    $('.hpFeature').css('display','block');
    $('.hpFeature').addClass('fide');
    $('.hpFeature:nth-child(' + count + ')').removeClass('fide');
});

$(function(){
    $(".featureButton").click(function(){
        $('.hpFeature').removeClass('fide');
    });
});

所以，我试图找出一种简单的方法来做到这一点，使用 nth-last-child 属性通过 JavaScript 显示第一张图片，然后滚动浏览，然后在点击按钮时转到下一个计数，删除 .fide，最后回到第一个（我似乎无法让 nth-last-child 工作，但可以让 nth-child 工作）。

【问题讨论】：

可能是 $('.hpFeature:last')？
仅供参考，$(document).ready(function () {... 和 $(function() {... 正在做同样的事情。您可以将所有代码放在一个或另一个中。
感谢@MiniRagnarok 让它更流畅一些，但我仍然不知道如何编写可以转到列表中下一项的 JavaScript；我认为它必须是一个数组？

标签： javascript css css-selectors

【解决方案1】：

如果是我，我会将数组功能委托给原生 javascript 数组。

然后我可以操作该数组并将其读出为 html。

所以我们可以创建一个数组

var hpFeatureArray = []

创建一个绑定到 html 的函数

function refreshArray() {
  var content = '' 
  for (var i=0; i < hpFeatureArray.length; i++) content = content + '<div class="hpFeature"></div>'
  $('#homepage').html(content)
}

刷新。

refreshArray()

就数据的实际操作而言，现在使用原生 JavaScript 数组操作很容易。

hpFeatureArray.push('whatever')
refreshArray()

这是一个例子 http://codepen.io/ajkochanowicz/pen/spfAL/

【讨论】：

【解决方案2】：

而不是使用nth-child 和fide 类中的极端定位，我认为您可以通过简单的“活动”类（以确定哪个是当前部分）并更改display 值来做到这一点.像这样的：

<div id="homepage">
    <div class="hpFeature active"></div> 
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
</div>

<button class="featureButton">Click Here</button>

。 . .并将 CSS 替换为：

.hpFeature {display:none;}
.hpFeature.active {display:block;}

那么，你的 JS 代码只需要这样做：

$(document).ready(function() {
    $(".featureButton").on("click", function() {
        var $activeDiv = $(".active");
        var $nextDiv = null;

        if ($activeDiv[0] === $(".hpFeature:last-child")[0]) {
            $nextDiv = $(".hpFeature:first-child");
        }
        else {
            $nextDiv = $activeDiv.next();
        }

        $activeDiv.removeClass("active");
        $nextDiv.addClass("active");
    });
});

如果我理解您正在尝试正确执行的操作，那么这应该可以为您提供所需的功能。

【讨论】：