Как добавить и удалить класс из нескольких элементов?

Question

После многих-многих часов попыток разобраться в этом я сдался и пришел сюда за помощью.

Идея такова:

если у div есть активный класс, то изображения внутри этого div должен стать активным классом. Если нет, то изображения в других элементах div без активного класса должны иметь classList.remove ('active').

Таким образом, слайдер изображений должен работать только с изображениями, имеющими класс pi c.

Я перепробовал много способов решить это. Но ничего не работает. Пока я пытаюсь решить это следующим образом:

РЕДАКТИРОВАНИЕ

Я попытаюсь объяснить это снова. Оказалось, не все так просто.

Это слайдер фотогалереи. Идея такова: например, когда вы нажимаете <li>cities</li>, вы должны видеть фотографии, относящиеся только к этому li. Но структура слайдера изображений работает следующим образом: на экране отображается только одна фотография. Когда вы нажимаете кнопку «Предыдущая» или «Следующая», изображение меняется. Но следует менять изображения только для выбранной вкладки (города, люди, пейзаж, натюрморт).

Пока что слайдер изображений меняет фотографии, только если изображение имеет класс пи c.

В этом случае я решил сделать это следующим образом:

Если есть class active (класс добавляется, когда вы нажимаете на li и удаляете, когда вы выбираете другое), тогда только изображения в этом div получат класс .pi c

Надеюсь, это прояснилось. И спасибо за ваше время

**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>

<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>

Answer 1

Избавьтесь от дубликатов идентификаторов active и img. При необходимости используйте классы.

Pure CSS решение:

.imgSlider.active img {
  box-shadow: 0 0 0 4px red;
}

<div class="imgSlider fade active" data="cities">
    <img src="https://placehold.it/50x50/0bf">
    <img src="https://placehold.it/50x50/f0b">
    <img src="https://placehold.it/50x50/bf0">
</div>
<div class="imgSlider fade" data="people">
    <img src="https://placehold.it/50x50/fb0">
    <img src="https://placehold.it/50x50/b0f">
    <img src="https://placehold.it/50x50/0fb">
</div>

А если вам действительно нужно решение JS ...

JavaScript решение:

function handleActivePic () {

  const EL_parents = document.querySelectorAll(".imgSlider");
  
  EL_parents.forEach(parent => {
  
    const isParentActive = parent.classList.contains('active');
    const images = parent.querySelectorAll("img");
    
    images.forEach(img => {
       img.classList[isParentActive?'add':'remove']('pic');
    });
  });
}

handleActivePic(); // Run it!

.pic {
  box-shadow: 0 0 0 4px red;
}

<div class="imgSlider fade active" data="cities">
    <img src="https://placehold.it/50x50/0bf">
    <img src="https://placehold.it/50x50/f0b">
    <img src="https://placehold.it/50x50/bf0">
</div>
<div class="imgSlider fade" data="people">
    <img src="https://placehold.it/50x50/fb0">
    <img src="https://placehold.it/50x50/b0f">
    <img src="https://placehold.it/50x50/0fb">
</div>

Answer 2

var divs = document.getElementsByTagName('div');
var cnt = divs.length;

for(let i = 0;i<cnt;i++){
    var imgs = divs[i].querySelectorAll('img');        
    var iCnt = imgs.length;

   if(divs[i].classList.contains('active')){        
       for(let j=0;j<iCnt;j++){
          imgs[j].classList.add('active');
       }  
   }else{
       for(let j=0;j<iCnt;j++){
           imgs[j].classList.remove('active');
       }   
   }
}

<div class="imgSlider fade active" id="active" data="cities">

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

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

Answer 3

Я не могу точно понять, что вы пытаетесь сделать, но если вам нужно изменить css imgs в соответствии с классом в родительском ... проверьте, может это поможет

.imgSlider.active > img {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="imgSlider fade active" data="cities">

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

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