我希望基於對象字面量具有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);
}
這可能嗎? 如果是這樣,如何,這是實現這一目標的最佳方式?
您需要一個循環。 – 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