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

Question

After many-many hours trying to sort it up I gave up and came here for a help.

The idea is:

if div has a class active then images within that div should get class active. If not then images in other divs without class active should have classList.remove('active').

So the image slider should work only with images that has class pic.

I've tried many ways to solve this. But nothing is working. So far I'm trying to solve it this way:

EDITED

I will try to explain it again. Turned out its not that simple.

It is a photo gallery slider. The idea is: When you press on <li>cities</li> for example, then you should see photos only related to this li. But the structure of the image slider works this way: It shows only one photo on the screen. When you press button prev or next it would change the image. But should change images only for the chosen tab ( cities, people, landscape, still life).

So far image slider changes photos only if an image has a class pic.

In this case I decided to do it this way:

If have a class active (class is added when you press on the li and delete when you choose another one) then only images within that div will get class .pic

Hope it made more clear. And thanks for you time

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

Get rid of the duplicate IDs active and img . Use classes if needed.

Pure CSS solution:

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

And if you really need a JS solution...

JavaScript solution:

 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

I can't understand exactly what are you trying to do, but if what you need is change the css of the imgs according a class in the parent... check this maybe helps

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

Answer 3

 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 4

You can use Each in your elements and use classList.add/remove/toggle

document.querySelectorAll(".elem").forEach(e => {}
    e.classList.add("any");
);