如何根據javascript中的對象字面值創建if/elseif/else語句

我希望基於對象字面量具有if/else if/else語句。對象文字將是用戶生成的，所以我不知道它會持續多久，但我會知道鍵/值對命名方案。如何根據javascript中的對象字面值創建if/elseif/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); 
}

雖然自從obj ect文字可以由用戶修改，我怎樣才能生成一個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); 
}

這可能嗎？如果是這樣，如何，這是實現這一目標的最佳方式？

來源

2012-04-25 hybrid

您需要一個循環。 – SLaks 2012-04-25 15:55:34

爲什麼不使用正確的* CSS *和***媒體查詢*** - 考慮到圖像在CSS中被引用，適當的圖像將被提取用於屏幕大小。這個解決方案將要求你從使用''改變爲某個塊級元素和'background-image'。 – xandercoded 2012-04-25 15:58:25

謝謝Xander的建議。使用媒體查詢和背景圖片是一個有效的解決方案，儘管我正在爲內容圖像尋求解決方案，最好將它們作爲img元素而不是背景圖像。我相信Facebook/Pinterest等網站更容易從img元素中獲取圖片，而不是從div中獲取背景圖片。 – hybrid 2012-04-25 16:37:39

遍歷數組：

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的是在他的評論是正確的，你應該使用media queries來代替。

來源

2012-04-25 15:59:23

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-25 16:02:29

如何根據javascript中的對象字面值創建if/elseif/else語句

回答

相關問題