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

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 回答
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 回答