querySelectorAll funktioniert nicht mit Daten-srcset

Question

Ich möchte eine Klasse auf alle horizontalen Imgs auf der Website anwenden.

Ich versuche, diese Funktion unten zu verwenden, aber es funktioniert nicht.
Jede Hilfe würde sehr geschätzt werden.

$(function() { 
 
    var images = document.querySelectorAll('[data-srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://cdn.pixabay.com/photo/2015/02/18/11/50/mountain-landscape-640617_960_720.jpg" alt=landscape>

Answer 1

Es ist besser alt=landscape mit alt="landscape" zu ersetzen.

beide

var images = document.querySelectorAll('[data-srcset]'); 

und

var images = $('[data-srcset]'); 

Arbeiten für mich.

Ihr Problem ist, wenn die Aussage nicht wahr ist. es geht immer zu else.

Versuchen Sie, Ihre if-Anweisung mit dem folgenden Code zu aktualisieren.

if (images[i].naturalWidth > images[i].naturalHeight) { 
    $(images[i]).addClass('horizontal'); 
    console.log(images[i]); 
} else { 
    console.log('else'); 
} 

Sie werden sehen, dass es immer anders geht.

Answer 2

Das ist, weil das data:... Bild, das Sie zur Verfügung stellen, 1x1 ist und so die Überprüfung für images[i].naturalWidth > images[i].naturalHeight fehlschlägt.

Beachten Sie, dass, wenn Sie das Attribut srcset (statt data-srcset), die der Standard ist es wie erwartet funktioniert (aber Sie müssen die load Ereignis der Seite verwenden).

---

$(window).load(function() { 
 
    var images = document.querySelectorAll('[srcset]'); 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].naturalWidth > images[i].naturalHeight) { 
 
     $(images[i]).addClass('horizontal'); 
 
    } 
 
    } 
 
})

.horizontal{border:10px solid OliveDrab;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/400x200" alt=landscape> 
 

 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/200x210" alt=landscape>