[英]How do I use JavaScript and Nth-Last-Child to add and remove CSS classes?
I'm not a JavaScript wizard by any means, but I'm trying to figure out a way with JavaScript to add and remove classes to a series of DIVs based on the click of one button. 无论如何,我都不是JavaScript向导,但是我试图找出一种使用JavaScript的方法,该方法可以基于一个按钮的单击向一系列DIV添加和删除类。 Let is say that I have a list:
假设我有一个列表:
<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>
My default CSS for progressive enhancement purposes so there is at least one image shown as fallback: 我的默认CSS用于渐进增强,因此至少有一张图片显示为后备:
.hpFeature:nth-child(1) {display:block;}
.hpFeature {display:none;}
.fide {position: absolute; left:-9999px;}
...and my JavaScript so far is something like this: ...到目前为止,我的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');
});
});
So, I'm trying to figure out a simple way to do this with the nth-last-child property showing the first image through JavaScript, and then scrolling through then when clicking on the button it goes to the next one in the count, removes .fide, and at the end goes back to the first (also I can't seem to get nth-last-child to work but can get nth-child to work). 因此,我正在尝试通过nth-last-child属性通过JavaScript显示第一个图像的方法,然后滚动浏览然后单击按钮时,它会转到计数中的下一个图像,这是一种简单的方法删除.fide,最后返回第一个(同样,我似乎无法让nth-last-child工作,但可以让nth-child工作)。
If it were me, I would delegate the array functionality to a native javascript array. 如果是我,我会将数组功能委托给本机javascript数组。
I can then manipulate that array and have it read out as html. 然后,我可以操纵该数组并将其读取为html。
So we could create an array 所以我们可以创建一个数组
var hpFeatureArray = []
Create a function to bind to html 创建一个绑定到html的函数
function refreshArray() {
var content = ''
for (var i=0; i < hpFeatureArray.length; i++) content = content + '<div class="hpFeature"></div>'
$('#homepage').html(content)
}
Refresh. 刷新。
refreshArray()
As far as the actual manipulation of data, it's easy to use native JavaScript array manipulation now. 就数据的实际操作而言,现在很容易使用本机JavaScript数组操作。
hpFeatureArray.push('whatever')
refreshArray()
Here's an example http://codepen.io/ajkochanowicz/pen/spfAL/ 这是一个示例http://codepen.io/ajkochanowicz/pen/spfAL/
Instead of using the nth-child
and the extreme positioning in the fide
classe, I think you can do this with simply an "active" class (to identify which is the current section) and changing the display
value. 我认为您可以仅使用“活动”类(以识别当前部分)来更改
display
值,而不用在fide
中使用第nth-child
和极端位置。 Something like this: 像这样:
<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>
. 。 .
。 .
。 and replace the CSS with this:
并用以下代码替换CSS:
.hpFeature {display:none;}
.hpFeature.active {display:block;}
Then, you're JS code would just need to do this: 然后,您就是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");
});
});
If I'm understanding what you are trying to do correctly, this should get you the functionality that you are looking for. 如果我了解您要正确执行的操作,那么应该可以找到想要的功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.