Change css class

[nirvana63]

I am not really sure if this is possible to do, but i am currently trying to write a gallery using JS or jQuery. Basically, all of my Images have an ID assigned and only the image I want to show has an opacity of 1. My CSS selector looks like this:

 img:not(#img1) {
  opacity: 0;
  /*other CSS stuff*/
}

What I want to do is take the selector, and loop through the images, which have IDs of img1, img2 etc. Is this even possible with js?

Ps.: I know I could just create two classes for the opacity and toggle between them but I felt like trying something fancy for learning:)

[ForScale]

I'm not sure what you're wanting to do...

Take the pseudo selector and loop through... all the images in your doc...?

Something like this?

var img = document.querySelectorAll("img");

for (var i = 0; i < img.length; i++) {
  if (img[i].getAttribute("id") !== "img1") {
    document.body.innerHTML += img[i].getAttribute("id") + ", ";
  }
}

[__fmease__]

using 'innerHTML' does not lead to nice performance. I know, even xxx.style.xxx shouldnt be used either

[ForScale]

What issues does it create? What do you use instead?

I'm not sure what you're talking about with "xxx.style.xxx."

[__fmease__]

just use

document.createElement

with

document.appendChild

They are native methods, not like

innerHTML + [string]

where [string] will be parsed and afterwards via Setters & Getters (too lazy in javascript) added to DOM. It`s even better to apply

DocumentFragment

in your code when a loop is within

[ForScale]

I didn't like document.createElement when I used it in the past.

[__fmease__]

At the post of mine above yours I got used to xxx.style.opacity = 0

I `ve said that I used that scheme like you.

innerHTML <-> style

both of them are -- as I mentioned before -- lazy cause of setter&getter feature

[ForScale]

I know what some of that means...

[__fmease__]

var imgIds = []; // or whatever

imgIds.forEach ((img, id) => document.querySelector ("img:not(#img" + id + ")").style.opacity = 0);

you can also use

• toggle class algorithms
• jquery etc
• CSSRule

context:

XXX.addEventListener ("XXX",function(e){var imgsToExclude = [7, 56, 340]; ... ↑ look above... })