Javascript 如何从多个元素中添加和删除类？

经过好几个小时的努力，我放弃了，来到这里寻求帮助

这个想法是：

如果div有一个类处于活动状态，那么该div中的图像应该处于活动状态。如果没有，那么其他div中没有活动类的图像应该有classList.remove（'active'）

因此，图像滑块应仅适用于具有pic类的图像

我试过很多方法来解决这个问题。但一切都不起作用。到目前为止，我正试图以这种方式解决这个问题：

已编辑

我会再解释一遍。结果不是那么简单

这是一个照片库滑块。这个想法是：例如，当你按下城市按钮时，你应该只看到与这个城市相关的照片。但是图像滑块的结构是这样工作的：它在屏幕上只显示一张照片。当您按下按钮prev或next时，它将更改图像。但应仅更改所选选项卡（城市、人物、风景、静物）的图像

到目前为止，图像滑块仅在图像具有pic类时更改照片

在这种情况下，我决定这样做：

如果有一个类处于活动状态（当您按下li键时会添加类，当您选择另一个类时会删除类），则只有该div中的图像才会获得class.pic

希望能说得更清楚。谢谢你抽出时间

**EDITED**

   <div class="info"> 
        <div class="galery_menu">
        <ul>
            <li class="galery" data="cities">cities</li>
            <li class="galery" data="people">people</li>
            <li class="galery" data="landscape">landscape</li>
            <li class="galery" data="still_life">still life</li>
        </ul>
        </div>

    <div class="galery_slider">

        <a class="prev fade"  alt="prev" >❮</a>
        <a class="next fade"  alt="next" >❯</a>
<div class="imgSlider fade active" id="active" data="cities">

    <img src="img/cities/cities_2.jpg" id="img">
    <img src="img/cities/cities_1.jpg" id="img">
    <img src="img/cities/cities_3.jpg" id="img">
    <img src="img/cities/cities_4.jpg" id="img">

</div>
<div class="imgSlider fade" id="active" data="people">
    <img src="img/people/people_1.jpg" id="img" >
    <img src="img/people/people_2.jpg" id="img" >
    <img src="img/people/people_3.jpg" id="img" >
    <img src="img/people/people_4.jpg" id="img" >
    <img src="img/people/people_5.jpg" id="img" >
    <img src="img/people/people_6.jpg" id="img" >
    <img src="img/people/people_7.jpg" id="img" >
    <img src="img/people/people_8.jpg" id="img" >
</div>
</div>

**已编辑**

城市
人
景观
静物

❮
❯

让picture=document.getElementById（'img'），
active=document.getElementById（'active'）；
if（active.classList.contains（'active'））{
for（设i=0；i

清除重复的ID

活动的
和
img
。如果需要，使用类

纯CSS解决方案：

.imgSlider.active img{
方框阴影：0 4px红色；
}
我无法确切理解您想要做什么，但是如果您需要的是根据父级中的类更改imgs的css。。。看看这个也许有帮助


.imgSlider.active>img{
背景色：红色；
}

欢迎来到我的主页

var divs=document.getElementsByTagName（'div'）；
var cnt=divs.length；
对于（假设i=0；IID是唯一的，使用类来重复元素。老实说，您不需要更改后代元素的类来匹配祖先，因为CSS或JavaScript。在这两种情况下，您都可以从后代检查祖先元素，以查看它是否有特定的类。如果您与我们共享如果您觉得需要添加和删除类，我们可以帮助您找到更好的解决方案。也许解释一下您正在构建的内容可以帮助您找到更好的解决方案。
.pic
有什么作用？为什么不直接使用CSS，比如
.active img{/*pic styles here*/}
？此外，ID表示ID。使用类它用于图像滑块。因此，滑块可以处理特定的div和其中的图像。如果选择“城市”选项卡，则滑块可以处理与该选项卡相关的图像，依此类推。pic是imgae滑块正在处理的类。因此，它应该仅使用该类更改图像
<script>
let picture = document.getElementById('img'),
    active = document.getElementById('active');
if (active.classList.contains('active')) {
    for (let i = 0; i < picture.length; i++){
        picture[i].classList.add('pic');
     }
} else {
    for (let i = 0; i < picture.length; i++){
        picture[i].classList.remove('pic'); 
}}
</script>