Wie setzt man Bildattribute auf die Aufteilung zweier anderer Attribute?

Question

Ich versuche, eine JQuery-Funktion durch eine Reihe von Bildern mit der Klasse "img-cover" zu loopen, so dass jedem Bild der Wert bgHeight, bgWidth und bgRatio zugewiesen wird, der der Breite, Höhe und dem Bild entspricht Seitenverhältnis jeweils. Allerdings habe ich Schwierigkeiten, diese Variablen jedem Bild in der Schleife zuzuordnen. Jede Eingabe ist erwünscht!

Original-JQuery (für eine statische 1500x2250 Bild):

var bgHeight = 1500;        
var bgWidth = 2250;        
var bgRatio = bgHeight/bgWidth; 

Mein Versuch, eine Schleife durch mehrere Bilder:

$('.img-cover').each(function() { 
    $(this).attr('bgHeight',$(this).height()); 
    $(this).attr('bgWidth',$(this).width()); 
    $(this).attr('bgRatio',$(this).bgHeight()/$(this).bgWidth()); 
}); 

Dank!

Answer 1

Sie rufen zwei undefinierte Funktionen hier:

$(this).bgHeight()/$(this).bgWidth() //no such functions in jQuery, unless you've added them 

jQuery attr() funktioniert so: Wenn Sie es zwei Parameter übergeben, ist es ein «Setter». Wenn Sie nur eine Attributwert erhalten müssen, verwenden Sie attr() mit nur einem Parameter:

$(this).attr('bgWidth') //gets the value of an attribute called 'bgWidth' 

Abgesehen davon gibt es einige Code-Stil Fragen sind. 1) Sie können $(this) zu einer Variablen innerhalb Ihrer Funktion speichern. 2) Sie müssen bgWidth und bgHeight nicht von Attributen übernehmen - sie entsprechen den Werten für width() und height() innerhalb einer Iteration. Speichern Sie sie in Variablen w, h und arbeiten Sie mit ihnen:

$('.img-cover').each(function() { 
    var $img = $(this), 
     w = $img.width(), 
     h = $img.height(); 
    $img.attr('bgHeight', h); 
    $img.attr('bgWidth', w); 
    $img.attr('bgRatio', h/w); 
});