Wie verwende ich querySelectorAll anstelle anderer Methoden, um auf mehrere Elemente abzuzielen? [Duplikat]

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Wie verwende ich querySelectorAll anstelle anderer Methoden, um auf mehrere Elemente abzuzielen? [Duplikat]

by Guest » 07 Jan 2025, 09:56

Ich muss alle img-Elemente in der .lazy-load-wrapper-Klasse ansprechen und ihr mehrere Attribute hinzufügen. Und ich muss querySelectorAll verwenden, aber es ist ein Fehler aufgetreten

Code: Select all

Uncaught TypeError: elmnt.setAttribute is not a function
[/b]. Ich denke, ich muss das Element innerhalb von querySelectorAll schleifen, weil es eine statische Nodelist ist, aber wie kann ich das machen?.
Hier sind die Codes:

Code: Select all

function theLazyLoader () {
const eleAttributes = {
loading: 'lazy',
class: 'lazy-load-spinner',
};
function setMultipleAttributes(elmnt, attributesToSet) {
Object.keys(eleAttributes).forEach(i => {
elmnt.setAttribute(i, eleAttributes[i]);
});
}

var elements = document.querySelectorAll(".lazy-load-wrapper img");
for(var i = 0; i < elements.length; ++i){
setMultipleAttributes(elements[i], eleAttributes);
}
}
theLazyLoader();

Code: Select all

img {
width: 400px;
height: 300px;
display: block;
margin: 10px auto;
border: 0;
}

.lazy-load-spinner {
background: url("https://cdn.pixabay.com/animation/2023/10/10/13/27/13-27-45-28_512.gif") center center/100px 100px no-repeat #F1F1FA;
}

Code: Select all

[img]https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300[/img]
[img]https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300[/img]

Top