1

我想要一个基于对象文字的 if/else if/else 语句。对象文字将由用户生成，因此我不知道它会持续多久，尽管我会知道键/值对命名方案。

例如，我有一些代码可以获取视口宽度和下面的更新 img src 属性的函数

vpwidth =  window.innerWidth;

function modifyImgSrc (srcModifier) {
    src = src.replace(".jpg", srcModifier + ".jpg");
    src = src.replace(".png", srcModifier + ".png");
    src = src.replace(".gif", srcModifier + ".gif");
};

然后我有我的对象文字

var brkpnts = [
   {width: 320, srcmodifier: '-s'},
   {width: 768, srcmodifier: '-m'},
   {width: 1024, srcmodifier: '-l'},
];

我想根据对象文字生成一个 if 语句

if ( vpwidth <= brkpnts[0].width ) {
    modifyImgSrc(brkpnts[0].srcmodifier);
}
else if ( vpwidth <= brkpnts[1].width ) {
    modifyImgSrc(brkpnts[1].srcmodifier);
}
else {
    modifyImgSrc(breakpoints[2].srcmodifier);
}

虽然由于用户可以修改对象文字，但我如何生成 if/else if/else 语句以匹配用户添加到对象文字的内容。例如， 可能有超过 3 个键/值对。

var breakpoints = [
    {width: 320, srcmodifier: '-xs'},
    {width: 534, srcmodifier: '-s'},
    {width: 768, srcmodifier: '-m'},
    {width: 1024, srcmodifier: '-l'},
    {width: 1440, srcmodifier: '-xl'}
];

在这种情况下，我想要一个看起来像这样的 if 语句。

if ( vpwidth <= brkpnts[0].width ) {
    modifyImgSrc(brkpnts[0].srcmodifier);
}
else if ( vpwidth <= brkpnts[1].width ) {
    modifyImgSrc(brkpnts[1].srcmodifier);
}
else if ( vpwidth <= brkpnts[2].width ) {
    modifyImgSrc(brkpnts[1].srcmodifier);
}
else if ( vpwidth <= brkpnts[3].width ) {
    modifyImgSrc(brkpnts[1].srcmodifier);
}
else {
    modifyImgSrc(breakpoints[4].srcmodifier);
}

这可能吗？如果是这样，如何实现，这是实现这一目标的最佳方式吗？

4

2 回答 2

1

遍历数组：

var modified = false;
for(var i = 0, len = brkpnts.length; i < len; i++) {
    if(vpwidth <= brkpnts[i].width) {
        modifyImgSrc(brkpnts[i].srcmodifier);
        modified = true;
        break;
    }
}

// Use the biggest one if vpwidth larger than all
if(!modified) {
    modifyImgSrc(brkpnts[brkpnts.length - 1].srcmodifier);
}

编辑：虽然 Xander 在他的评论中是正确的，但您可能应该使用媒体查询。

于 2012-04-25T15:59:23.363 回答
0 
vpwidth =  window.innerWidth;  

function modifyImgSrc (srcModifier) {     
  src = src.replace(".jpg", srcModifier + ".jpg");     
  src = src.replace(".png", srcModifier + ".png");     
  src = src.replace(".gif", srcModifier + ".gif"); 
}; 

var breakpoints = [     
  {width: 320, srcmodifier: '-xs'},      
  {width: 534, srcmodifier: '-s'},     
  {width: 768, srcmodifier: '-m'},     
  {width: 1024, srcmodifier: '-l'},      
  {width: 1440, srcmodifier: '-xl'} 
];

for(var i=0; i<breakpoints.length;i++)
{
  if(breakpoints[i].width == vpwidth)
  {
     modifyImgSrc(breakpoints[i].srcmodifier);
     break;
  }
}
于 2012-04-25T16:02:29.163 回答