在列表项中添加/删除类 [英] Adding / Removing classes to list items

问题描述

因此，我用左右导航箭头构建了这个小滑块，尝试将类添加到ul中的列表项时遇到了麻烦.

So I've built this little slider with left and right nav arrows and I'm having trouble with my attempts to add a class to the list items in the ul.

基本上我想将一个类添加到列表中的下一个项目，同时从上一个项目中删除该类.

Basically I want to add a class to the next item on the list, while removing that class from the previous item at the same time.

现在的事情是，我已经使它完美地工作了，但是只朝着正确的方向，而不是朝左.

Now the thing is, I've got this working perfectly, but only in the right direction, not left.

请注意，列表项在两个方向上均正确排序，只是将类添加到左侧，而不是:

Note that list items sort themselves properly in both directions, it's just adding the class to the left that doesn't:

$('.home_slider > li:first').addClass('active-slide');

$('#slider_arrow_right').click(function(){
  $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide');
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#slider_arrow_left').click(function(){
  $('.home_slider > li:first').before($('.home_slider > li:last'));
  $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide');      
});

我尝试以几种不同的方式更改#slider_arrow_left单击函数，但是它仍然沿与右箭头相同的列表方向添加类，或者根本不起作用.任何帮助深表感谢！

I've tried changing up the #slider_arrow_left click function in a few different ways, but it still adds the class in the same list direction as the right arrow, or just doesn't work at all. Any help is much appreciated!

已更新:

这是显示问题的JSFiddle:小提琴

Here's a JSFiddle showing the issue: Fiddle

推荐答案

使用css子选择器.在这种用例中，这将使您的工作更轻松，并减少代码.

Use the css child selector. It will make your life easier in this use case and reduce your code.

JavaScript

$('#right').click(function(){
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#left').click(function(){
  $('.home_slider > li:first').before($('.home_slider > li:last')); 
});

CSS

.nav_buttons{
  display:inline-flex;
  color:#fff;
  padding:16px;
}
#left{
  width:40px;
  height:40px;
  margin-right:8px;
  background:grey;
  padding:4px;
}
#right{
  width:40px;
  height:40px;
  background:grey;
  padding:4px;
}
.home_slider{
  display:inline-flex;
  list-style-type:none;
}
.home_slider li{
  width:80px;
  height:80px;
}
#one{
  background:blue;
}
#two{
  background:red;
}
#three{
  background:yellow;
}
#four{
  background:green;
}
.home_slider>li:first-child{
   border:8px solid black;
}

此外，如果您需要第一个孩子具有任何含义，则可以在代码中稍后使用.

Also if you need to get the first child if it holds any meaning to be used later in code.

var firstChild = $('.home_slider li:first-child');

要制作动画，只需更改css.

To do animations just change the css.

将此添加到CSS

@keyframes FadeIn { 
  from { opacity: 0; }
  to   { opacity: 1; }
}

并将其添加到已经存在的子选择器中.

And add this to the child selector already there.

animation: FadeIn 1s linear;

这篇关于在列表项中添加/删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！