1

私はjavascriptを初めて使用し、画面サイズが480pxに縮小されたときに1つの画像を置き換えるこのjQueryを持っています。同じことをするためにもっとたくさんの画像を追加したいのです。私が作業しなければならなかった唯一の解決策は、コードを何度も貼り付けて、画像の値を新しいものに置き換えることでした。では、同じスクリプトで複数のifとelseを作成するにはどうすればよいですか？

$(document).ready(function() {  

function imageresize() {  
var contentwidth = $('body').width();  
if ((contentwidth) < '480'){  
$('.spelguide').attr('src','bilder/480/spelguide.jpg');  
} else {  
$('.spelguide').attr('src','bilder/spelguide.jpg');  

}  
}  

imageresize();//Triggers when document first loads      

$(window).bind("resize", function(){//Adjusts image when browser resized  
imageresize();  
});  

});
4

4 に答える 4

2

複数の if-else-if を連鎖させる通常のパターンは、次のようなことです

if (some_condition) {
  // do stuff
} else if (some_other_condition) {
  // do other stuff
} else if (another_condition) {
  // do another thing
} else {
  //default case
}

これは Javascript に限ったことではありません。if ステートメントを使用する他のほとんどのプログラミング言語では、これに似ています。

于 2013-03-06T20:40:22.787 に答える
0

これが私がすることです（私があなたの質問を正しく理解していると仮定して）。簡単に言うと、「for」ループを使用します。

  • まず、各画像に（クラスではなく）一意のIDを付けます。
    • <img id="example_img_id1" src="..." />
  • 私のJavaScriptでは、各画像の（id：image_name）を格納する（key：value）ペアを持つJSONオブジェクトを作成します（以下を参照）。
  • 次に、JSONオブジェクトを反復処理するfor/inループを使用します。

  • JSONオブジェクトで、一意の各img IDをキーとして追加し、画像の名前を値として追加します。あなたが持っているすべての画像に対してこれを行います。

    // get the width of your body
var contentwidth = $('body').width();  

// key: value -----> '#img_id': 'src'
var imgs = {
    '#example_img_id1' : 'imgname1.jpg',
    '#example_img_id2' : 'imgname2.jpg',
    '#example_img_id3' : 'imgname3.jpg',
    // ...
    '#example_img_idn' : 'imgname4.jpg'
};

// iterate over each image and create its new src
for(var img in imgs) {
    // set the value of your src string
    var src = ''; 

    if(contentwidth < 480) { // if the screen size is less than 480
        src = '/bilder/480/' + imgs.img; // add the "/480/" directory
    } else { // anything 480 and larger
        src = '/bilder/' + imgs.img; // don't add "/480/"
    }

    // for every image in your JSON object (imgs),
    // it will create a jQuery object - $(img) - and
    // update its src attribute based on the screen width.
    $(img).attr('src', src);
}

猫の皮を剥ぐ方法は複数ありますが、これが「最良の」または「最も効率的な」アプローチというわけではありません。うまくいけば、それは少なくともあなたを正しい方向に向けます。これはすべて意味がありますか？

于 2013-03-06T20:58:45.510 に答える
0

If..Else If..Else が必要ですか? その場合、http://www.w3schools.com/js/js_if_else.aspに例があります。

于 2013-03-06T20:39:51.117 に答える
0

JavaScript ですべてを行うのを忘れて、ほとんどの作業を CSS に任せてください。javascriptで本体に決定クラスを設定するだけです。

Javascript:

$(window).bind("resize", function(){  
   var body = $('body');
   var bodyWidth = body.width();
   body.toggleClass('size-480', bodyWidth < 480);
});

HTML:

   <img src="transparant.gif" class="img-spelguide" />

CSS:

img.img-spelguide {
   width: 400px; /*adjust accordingly*/
   height: 400px; /*adjust accordingly*/
   background: url(bilder/spelguide.jpg) 50% 50% no-repeat;
}

.size-480 img.img-spelguide {
   width: 200px; /*adjust accordingly*/
   height: 200px; /*adjust accordingly*/
   background: url(bilder/480/spelguide.jpg) 50% 50% no-repeat;
}

純粋な JavaScript を使用して多くの画像を置き換えることもできますが、CSS の方が適しています。

ノート。@media-queries を使用できる場合は、そうしてください。これが最良の選択肢ですが、レガシー ブラウザをサポートする必要がある場合、media-queries は明らかに無効です =(

適切な測定のために、javascript ソリューションも投入しましょう。

HTML:

<img src="bilder/spelguide.jpg" data-small="bilder/480/spelguide.jpg" />

ジャバスクリプト:

$(window).bind("resize", function(){  
   var body = $('body');
   var useSmall = body.width() < 480;
   $('img[data-small]').each(function(){
      var img = $(this);
      var big = img.data( 'big') || img.attr('src');
      var small = img.data('small');
      // make sure we have the original (big) src stored.
      img.data( 'big', big );
      img.attr( 'src', useSmall ? small : big );
   });
});

まだ最適化の余地があります。

于 2013-03-06T20:48:28.720 に答える