1

我是 javascript 新手，当屏幕尺寸缩小到 480 像素时，我有这个 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-ifs 的通常模式是做类似的事情

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

你想要 If..Else If..Else 吗？如果是这样http://www.w3schools.com/js/js_if_else.asp给出了一个例子。

于 2013-03-06T20:39:51.117 回答
0

忘记用 javascript 做所有这些，让 CSS 完成大部分工作。只需使用 javascript 在 body 上设置一个确定类。

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，请这样做，这是最好的选择，但是如果您需要支持旧版浏览器，则显然媒体查询已经过时 =(

让我们也加入 javascript 解决方案，以取得良好的效果。

HTML：

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

JAVASCRIPT：

$(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 回答
0

这就是我要做的（假设我正确理解了你的问题）。我想说的简短答案是：使用“for”循环。

  • 首先，我会给每个图像一个唯一的 id（而不是一个类）：
    • <img id="example_img_id1" src="..." />
  • 在我的 JavaScript 中，我将创建一个JSON 对象，该对象具有一个 (key : value) 对，用于存储每个图像的 (id : image_name)（见下文）。
  • 然后，我将使用迭代 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 回答