如何使用JavaScript和Nth-Last-Child添加和刪除CSS類？

Question

無論如何，我都不是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工作）。

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

Answer 2

我認為您可以僅使用“活動”類（以​​識別當前部分）來更改display值，而不用在fide中使用第nth-child和極端位置。 像這樣：

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

如果我了解您要正確執行的操作，那么應該可以找到想要的功能。