Javascript 如何使用项目符号和箭头添加/删除类

当用户单击相应的编号或上一个/下一个箭头时，我很难理解如何从div中添加和删除类

注意第二个项目和第二个导航上的“活动”类。我希望当用户单击“1”或“previous”箭头时，该类被删除并添加到第一项和nav中

.wrap{
显示：块；
宽度：200px；
保证金：50px自动；
文本对齐：居中；
}
.导航{
边缘底部：10px；
}
.导航a{
填充物：5px；
}
.导航a:悬停{
字号：900；
光标：指针；
}
.导航a.激活{
边框底部：1px纯黑；
字号：900；
}
.prev，.next{
显示：内联块；
填充物：5px；
}
.prev:悬停，.next:悬停{
字号：900；
光标：指针；
}
.项目组{
显示：无；
填充：25px；
}
.项目1{
背景：红色；
}
.项目2{
背景：绿色；
}
.项目3{
背景：蓝色；
}
.项目.活动{
显示：内联块；
}

1.
2.
3.

您可以尝试以下方法：

$（'.next，.prev'）。在（'click'，function（）上{
var$cur=$（this）.closest（'.wrap'）.find（'.items div.active'）；
var$nav=$（this）.closest（'.wrap'）.find（'.nav a.active'））
if（$（this）.hasClass（'next'））{
if（$cur.next（'div'）。length==0）返回
$cur.next（'div'）.addClass（'active'）；
$nav.next（'a'）.addClass（'active'）；
}否则{
如果（$cur.prev（'div'）。长度===0）返回
$cur.prev（'div'）.addClass（'active'）；
$nav.prev（'a'）。addClass（'active'）；
}
$cur.removeClass（'active'）
$nav.removeClass（'active'）
})
$（'.nav a'）。在（'click'，function（）上{
var index=$（this.index（）；
$（this）.closest（'.wrap'）.find（'.items div'）.removeClass（'active'）.eq（index）.addClass（'active'））
$（this）.closest（'.wrap'）.find（'.nav a'）.removeClass（'active'）.eq（index）.addClass（'active'））
})

.wrap{
显示：块；
宽度：200px；
保证金：50px自动；
文本对齐：居中；
}
.导航{
边缘底部：10px；
}
.导航a{
填充物：5px；
}
.导航a:悬停{
字号：900；
光标：指针；
}
.导航a.激活{
边框底部：1px纯黑；
字号：900；
}
.prev，
.下一个{
显示：内联块；
填充物：5px；
}
.prev:悬停，
.下一步：悬停{
字号：900；
光标：指针；
}
.项目组{
显示：无；
填充：25px；
}
.项目1{
背景：红色；
}
.项目2{
背景：绿色；
}
.项目3{
背景：蓝色；
}
.项目.活动{
显示：内联块；
}

1.
2.
3.
1.
2.
3.

这里是另一种使用

索引的方法


var类=[“一”、“二”、“三”]；
var currentIndex=1；
$（'.next.prev'）。在（'click'，function（）上{
if（$（this）.hasClass（'next'））{
if（currentIndex==classes.length-1）返回；
removeAndAddActive（currentIndex，++currentIndex）；
}否则{
如果（currentIndex==0）返回；
RemoveAndAdActive（currentIndex，--currentIndex）；
}
})
$（'.nav a'）。在（'click'，function（）上{
让index=$（this.index（）；
RemoveAndAdActive（当前索引，索引）；
currentIndex=索引；
})
函数RemoveAndAdActive（removeIndex，addIndex）{
$（'..+类[removeIndex]）。removeClass（'active'）；
$（'.+类[addIndex]）.addClass（'active'）；
}
.wrap{
显示：块；
宽度：200px；
保证金：50px自动；
文本对齐：居中；
}
.导航{
边缘底部：10px；
}
.导航a{
填充物：5px；
}
.导航a:悬停{
字号：900；
光标：指针；
}
.导航a.激活{
边框底部：1px纯黑；
字号：900；
}
.prev，
.下一个{
显示：内联块；
填充物：5px；
}
.prev:悬停，
.下一步：悬停{
字号：900；
光标：指针；
}
.项目组{
显示：无；
填充：25px；
}
.项目1{
背景：红色；
}
.项目2{
背景：绿色；
}
.项目3{
背景：蓝色；
}
.项目.活动{
显示：内联块；
}

1.
2.
3.
单击数字不会work@Weedoze谢谢你指出。请检查一下更新是否美观hehe@Weedoze我实际上是在尝试用expression来切换类，但对于如何将当前索引与有效的索引进行比较，我并不感到困惑。但是如果有多个
div.wrap
，该怎么办？看起来它们都会被同一个箭头控制。但从数字上看只有第一个。有没有理由认为这比选择的答案更好？在我看来，这是不可取的，因为选择的解决方案不需要脚本中定义的每个项的类来工作。如果OP计划再添加10个div，这将强制更新数组。我建议使用当前单击的元素，然后导航到必要的位置element@bskool一点也不，我想用一种不同的方法提出另一种解决方案thinking@Rajesh你是right@Weedoze非常感谢。