0

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

ページが読み込まれると関数は正常に動作しますが、ウィンドウのサイズが変更されても内容は変わりません。

例を次に示します: 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();
}
4

3 に答える 3

0

現在のコードを使用する場合は、関数宣言を for ループの外に移動する必要があります。この記事を参照してください。

補足として、これらのスタイルの変更を処理するために JavaScript から離れることをお勧めします。CSS は、事前に決められたサイズのスタイル変更をメディア クエリの形式で処理する優れた方法を提供します。

于 2016-07-21T18:44:39.223 に答える
0

ループ全体のポイントは、要素を選択しているようです。1 つのクエリですべての要素を選択することで、これをより簡単に行うことができます。

$("#1, #2")

ループ内ですべてを実行しているため、関数を再定義して、サイズ変更関数を複数回割り当てています。

ところで、window.onresize イベント ハンドラに実際に関数を割り当てているのではなく、関数の戻り値を割り当てています。末尾の中括弧なしで割り当ててみてください。

于 2016-07-21T18:45:28.577 に答える