如何使用JavaScript和第n个最后一个子元素添加和删除CSS类？

无论如何，我不是一个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>

…到目前为止，我的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');
    });
});

<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>

---

因此，我试图找到一种简单的方法来实现这一点，第n个last child属性通过JavaScript显示第一个图像，然后在单击按钮时滚动到下一个按钮，删除.fide，最后返回到第一个（我似乎无法让第n个孩子工作，但可以让第n个孩子工作）。

如果是我，我会将数组功能委托给本机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)
}

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

hpFeatureArray.push('whatever')
refreshArray()

这里有一个例子

---

我认为您可以通过简单的“活动”类（识别哪个是当前部分）和更改

显示值来实现这一点，而不是使用
第n个子项和
fide
类中的极端定位。类似于：

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');
    });
});

<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>

然后，您的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");
    });
});

如果我理解了您正试图正确执行的操作，这将为您提供所需的功能。
可能$（'.hpFeature:last'）？仅供参考，
$（文档）。就绪（函数（）{…
和
$（函数（）{…
正在做同样的事情。您可以将所有代码放在其中一个中。感谢@MiniRagnarok，这使它变得更平滑了，但我仍然不知道如何编写JavaScript，可以转到列表中的下一项；我想它必须是一个数组？
$(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");
    });
});