Как создать несколько ifs и elses?

Question

Я новичок в javascript, и у меня есть этот jQuery, который заменяет одно изображение, когда размер экрана сокращается до 480 пикселей. Дело в том, что я хотел бы добавить намного больше изображений, чтобы сделать то же самое. Единственное решение, с которым я работал, - это снова и снова вставлять код и заменять значения изображений новыми. Итак, как я могу создать несколько 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 If..Else? Если да, то пример http://www.w3schools.com/js/js_if_else.asp.

Answer 2

Обычный шаблон для построения цепочки мультипликатора, если-иначе-сослагательное наклонение делает что-то вроде

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 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, пожалуйста, сделайте это, это лучший вариант, однако, если вам нужно поддерживать устаревшие браузеры, медиа-запросы, очевидно, отсутствуют = (

Позволяет также входить в решение 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

Вот что я сделал бы (предполагая, что правильно понимаю ваш вопрос). Короткий ответ, я бы сказал, это: Используйте петлю «для».

• Во-первых, я хотел бы дать каждому изображению уникальный идентификатор (вместо класса):
  • <img id="example_img_id1" src="..." />
• В моей JavaScript, я хотел бы создать JSON object, который имеет (ключ: значение) пара, сохраняющая (id: image_name) каждого изображения (см. ниже).
• Тогда я бы использовал for/in loop, который выполняет итерацию над объектом JSON.

• В вашем объекте JSON добавьте каждый из ваших уникальных идентификаторов img в качестве ключа и имя изображения в качестве значения. Сделайте это для всех изображений, которые у вас есть.

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

Там более чем один путь к коже кошки, и ни в коем случае это «лучше» или «самый эффективный» подход. Надеюсь, это по крайней мере указывает на то, что вы в правильном направлении. Все это имеет смысл?