Question

我是javascript的新手，我有这个jQuery，当屏幕尺寸缩小到480px时，它会替换一个图像。问题是，我想添加更多图像来做同样的事情。我必须解决的唯一解决方案是反复粘贴代码并用新的替换图像值。那么如何在同一个脚本中创建几个ifs和elses呢？

$(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();  
});  

});

Answer 1

链接多个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语句的编程语言中，它看起来与此类似。

Answer 2

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

Answer 3

忘记用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，请这样做，这是最佳选择，但是如果您需要支持旧浏览器，媒体查询显然是out =（

让我们尽可能地使用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 );
   });
});

还有一些优化空间。

Answer 4

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

首先，我会给每个图像一个UNIQUE id（而不是一个类）：
- <img id="example_img_id1" src="..." />
在我的JavaScript中，我会创建一个JSON object，它有一个（key：value）对，用于存储每个图像的（id：image_name）（见下文）。
然后，我将使用迭代JSON对象的for/in loop。

在您的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);
}

皮肤猫的方法不止一种，绝不是“最佳”或“最有效”的方法。希望它至少能指出你正确的方向。这一切都有意义吗？

如何创建多个ifs和elses？

4 个答案: