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，最后回到第一个（我也似乎无法让最后一个孩子工作，但可以让第n个孩子工作）。

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

我认为你可以只用一个＆＃34;活跃的＆＃34;而不是在nth-child classe中使用fide和极端定位。 class（标识当前部分）并更改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");
    });
});

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

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

2 个答案: