Javascript 如何创建多个ifs和ELSE？

我是javascript新手，我有一个jQuery，当屏幕缩小到480px时，它会替换一个图像。问题是，我想添加更多的图像来做同样的事情。 我要做的唯一解决方案是反复粘贴代码，并用新的图像值替换图像值。 那么，如何在同一脚本中创建多个ifs和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();  
});  

});  

$（文档）.ready（函数（）{
函数imageresize（）{
var contentwidth=$（'body'）.width（）；
如果（（contentwidth）<'480'）{
$（'.spelguide'）.attr（'src'，'bilder/480/spelguide.jpg'）；
}否则{
$（'.spelguide'）.attr（'src'，'bilder/spelguide.jpg'）；
}  
}  
imageresize（）；//首次加载文档时触发
$（窗口）.bind（“resize”，function（）{//调整浏览器大小时调整图像
imageresize（）；
});  
});  

你想要If..Else If..Else吗？如果是，请举例说明

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

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

Javascript:

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

您仍然可以使用纯javascript替换大量图像，但CSS更适合

注意。如果您可以使用@media查询，请这样做，这是最好的选择，但是如果您需要支持传统浏览器，那么媒体查询显然已经过时了=(

让我们也加入javascript解决方案，以便更好地衡量

HTML:

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

$（窗口）.bind（“调整大小”，函数（）{
变量body=$（'body'）；
var usesall=body.width（）<480；
$（'img[data small]'）。每个（函数（）{
var img=$（本）；
var big=img.data（'big'）| | img.attr（'src'）；
var small=模拟数据（“小”）；
//确保存储了原始（大）src。
img.数据（‘大’、大）；
img.attr（'src'，usesmoul？small:big）；
});
});

还有一些优化空间。

以下是我要做的（假设我正确理解了你的问题）。简单的回答是：使用“for”循环

• 首先，我会给每个图像一个唯一的id（而不是类）：

• 在我的JavaScript中，我将创建一个包含（key:value）对的脚本，该对存储每个图像的（id:image\u name）（见下文）
• 然后，我将使用在JSON对象上迭代的
• 在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);
  }
  

  //获取身体的宽度
  var contentwidth=$（'body'）.width（）；
  //键：值------>“#img_id”：“src”
  var imgs={
  “#示例_img_id1”：“imgname1.jpg”，
  “#示例_img_id2”：“imgname2.jpg”，
  “#示例_img_id3”：“imgname3.jpg”，
  // ...
  “#示例_img_idn”：“imgname4.jpg”
  };
  //迭代每个图像并创建其新的src
  用于（imgs中的var img）{
  //设置src字符串的值
  var src=''；
  如果（contentwidth<480）{//如果屏幕大小小于480
  src='/bilder/480/'+imgs.img；//添加“/480/”目录
  }还有{//480或更大的吗
  src='/bilder/'+imgs.img；//不添加“/480/”
  }
  //对于JSON对象（imgs）中的每个图像，
  //它将创建一个jQuery对象-$（img）-和
  //根据屏幕宽度更新其src属性。
  $（img）.attr（'src'，src）；
  }
  

---

给猫剥皮的方法不止一种，这绝对不是“最好的”或“最有效的”方法。希望它至少为您指明了正确的方向。这一切都有意义吗？

可能有一个CSS解决方案，但它也要求您列出每个大小。我建议将它们制作成背景图像，并使用CSS媒体查询进行交换：的确……例如@Media screen和（最大宽度：1024px）{//assign bg rule}我想您正在寻找

else if

…请参阅以获取更多信息。@Christophercott:浏览器是否会重新解释媒体查询的大小？请注意，OP希望对多个图像执行此操作。如何使用背景图像属性为多个不同的图像定义单独的src url？这是一个反问-您必须这样做为每个图像分配ID并手动设置每个背景src。更不用说，您提供的内容是有漏洞的。首先，根据定义，当需要完全的浏览器覆盖时，所有可能的问题答案都是有漏洞的，因为没有“干净”的方法来处理响应图像。第一个解决方案需要一个标识符，并且所有src都被放入第二个解决方案在将src分配给img标记时考虑了多个src。是的，类似于这样，尽管用户brbcoding提供了最好的解决方案！

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

// 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);
}