Onresize scheint nicht zu funktionieren, wenn in einer Schleife (Javascript)

Question

Ich versuche, eine Funktion auf der Grundlage der Bildschirmgröße innerhalb einer Schleife '.

Die Funktion funktioniert einwandfrei, wenn die Seite geladen wird, der Inhalt ändert sich jedoch nicht, wenn die Fenstergröße geändert wird.

Hier ist ein Beispiel: https://jsfiddle.net/celine305/BaNRq/27/

Jede Hilfe sehr geschätzt werden würde.

for (var i = 0; i < 2; i++) { 
    function red() { 
    $('#' + i + '').css('background', '#B60C0C') 
     .text('Screen Size RED'); 
    } 

    function orange() { 
    $('#' + i + '').css('background', '#EBAE10') 
     .text('Screen Size ORANGE'); 
    } 

    function green() { 
    $('#' + i + '').css('background', '#83ba2b') 
     .text('Screen Size GREEN'); 
    } 

    var widths = [0, 500, 850]; 

    function resizeFn() { 
    if (window.innerWidth >= widths[0] && window.innerWidth < widths[1]) { 
     red(); 
    } else if (window.innerWidth >= widths[1] && window.innerWidth < widths[2]) { 
     orange(); 
    } else { 
     green(); 
    } 
    } 
    resizeFn(); 
    window.onresize = resizeFn(); 
} 

Answer 1

1. Bewegen Sie die Funktionen außerhalb der for Schleife
2. Merge 3 Funktionen einen
3. Verwenden eines jQuery Zuhörer statt JavaScript, da Sie jQuery verwenden bereits

---

// You could also assign classes and use $(".className") instead of loop 
function changeColor(color) { 
    for(var i=0; i<2; i++){ 
     $('#'+i+'').css('background',color).text('Screen Size' + color); 
    } 
} 

var widths = [0, 500, 850]; 

function resizeFn() { 
    if (window.innerWidth>=widths[0] &&window.innerWidth<widths[1]) { 
     changeColor('#B60C0C'); 
    } else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) { 
     changeColor('#EBAE10'); 
    } else { 
     changeColor('#83ba2b'); 
    } 
} 

resizeFn(); 
$(window).resize(function() { 
    console.log("resize"); 
    resizeFn(); 
}) 

JSFiddle rendert den Inhalt in einem div, so dass Ihr Code war Die Größe wird nie erkannt. Ich habe einen Container hinzugefügt, um die Größenänderung zu erkennen, aber ansonsten sollten Sie $(window) verwenden.

Fiddle: https://jsfiddle.net/BaNRq/29/

Answer 2

Wenn Sie den aktuellen Code verwenden möchten, müssen Sie wahrscheinlich die Funktionsdeklarationen außerhalb der for-Schleife verschieben. See this article.

Als eine Randnotiz, würde ich empfehlen, weg von Javascript für die Handhabung dieser Stiländerungen. CSS bietet eine gute Möglichkeit, Formatänderungen für vorbestimmte Größen in Form von media queries zu behandeln.

Answer 3

Der ganze Punkt Ihrer Schleife scheint die Elemente auszuwählen. Sie können durch die Auswahl alle Elemente mit einer Abfrage so viel einfacher machen:

$("#1, #2") 

Weil du alles in der Schleife tun, Sie Funktionen neu zu definieren und sind die Resize-Funktion mehrmals zuweisen.

Oh, und übrigens, Sie zuweisen nicht wirklich eine Funktion der Window.onresize Event-Handler, sondern den Rückgabewert einer Funktion. Versuchen Sie, es ohne die folgenden geschweiften Klammern zuzuweisen.