2

私はこのコードを持っています:

var res = [1024, 1280, 1600],
    vals = [1, 2, 3];

配列window.resizeで一致する解像度に応じて、変数に値を割り当てたい。resだから私はこれを思いついた：

function update() {
  res.forEach(function( res, i ) {
    someVariable = $(window).width() < res ? vals[ i ] : 4;
  });
}

$(window).resize( update );

問題は、1600 でのみ機能し、他のすべての解像度では機能しないことです。しかし、次の (ハードコードされた) ことを行うと、問題なく動作します。

function update() {
  someVariable = $(window).width() < 1024 ? 1
   : $(window).width() < 1280 ? 2
   : $(window).width() < 1600 ? 3
   : 4;
}

これを動的に機能させる方法についてのアイデアはありますか?

編集：ある時点でループを中断する必要があると考えていますが、テストする条件がわかりません...

4

2 に答える 2

1

問題はforEach、満足のいく結果が見つかった後は終了しないことです。あなたはこのようにそれを解決することができます：

function update() {
  res.sort();//to make sure any future additions to the array doesn't break the order
  for( var i = 0; i < res.length; i++ ) {
    if ( winWidth < res[i] ) {
      someVariable = i + 1;//javascript arrays are 0-based. Add 1 to make it 1-based
      return;//terminate the loop when the result is found
    }
  }
  //if no result is found, this will be executed after the for loop
  someVariable = res.length;
  return;
}

PS。valsこのソリューションはアレイを必要としません。

于 2013-01-07T09:13:13.317 に答える
1

break条件が最初に真になり、値が割り当てられたときにループする必要がありますsomeVariable。幅が1024未満の場合も、1280および1600未満であり、最後に1600が取得されます。

function update() {
  res.forEach(function( res, i ) {
    if(winWidth < res)
     {
       someVariable = vals[ i ];
       return; //break the loop here
     }        
  });
}

AlexStackのコメントに従って編集し、この投稿で説明されているforEachループを解除するには、次の手法を使用できます。

function update() {
  var exp = {}; 
  try
  {
    res.forEach(function( res, i ) {
       if(winWidth < res)
       {
          someVariable = vals[ i ];
          throw exp;
       }        
    });
  }catch(ex){
      if (e!==exp) throw e;
  }
}
于 2013-01-07T09:08:18.380 に答える