オブジェクトリテラルに基づく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);
}
これは可能ですか?もしそうなら、どのように、そしてこれはこれを達成するための最良の方法ですか?