ループ内でonresizeが機能しないようです（JavaScript）

Question

ループ内の画面サイズに基づいて関数を呼び出そうとしています '。

ページが読み込まれても機能は正常に動作しますが、ウィンドウのサイズを変更してもコンテンツは変更されません。ここで

は例です： https://jsfiddle.net/celine305/BaNRq/27/

任意の助けもいただければ幸いです。

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

あなたはjQueryのを使用しているので、すでに

---

// 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(); 
}) 

代わりのJavaScriptのjQueryのリスナーを使用して1

に3つの機能をマージforループ

の外にあなたの機能を移動

JSFiddleはコンテンツをdivにレンダリングします。サイズ変更を検出することはありません。サイズを検出するためのコンテナを追加しましたが、それ以外の場合は$(window)を使用してください。

フィドル：https://jsfiddle.net/BaNRq/29/

Answer 2

現在のコードを使用する場合は、関数宣言をforループの外に移動する必要があります。 See this article.

ただし、私はこれらのスタイルの変更をハンドリングするためにjavascriptから離れることをお勧めします。 CSSは、media queriesの形式で所定のサイズのスタイル変更を処理する優れた方法を提供します。

Answer 3

ループの全体が要素を選択しているようです。あなたは1つのクエリですべての要素を選択することで、これははるかに単純行うことができます。

$("#1, #2") 

あなたがループですべてをやっているので、あなたが関数を再定義されており、サイズ変更機能を複数回割り当てています。

ああ、実際には、window.onresizeイベントハンドラに関数を割り当てているわけではなく、関数の戻り値です。末尾に中カッコを付けずに割り当ててみてください。