1

オブジェクトリテラルに基づくif/else if/elseステートメントが欲しいのですが。オブジェクトリテラルはユーザーが生成するため、キーと値のペアの命名スキームは知っていますが、どのくらいの時間がかかるかはわかりません。

たとえば、ビューポートの幅を取得するコードと、以下のimgsrc属性を更新する関数があります。

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 に答える