Поменяйте местами все изображения на странице по одной ссылке JQuery

Question

Мне нужно создать сайт, который имеет несколько вариантов цвета, но также должен иметь возможность производить впечатление «Zoom». Вот почему мне нужны все изображения на странице, чтобы я мог увеличить их размер.

Единственная проблема, с которой я столкнулся - я не уверен, как добавить определенный префикс ко всем изображениям на странице по одной ссылке.

например. Нажмите Розовый / Белый, и он добавляет префикс _pw ко всем изображениям на странице ..

Любая помощь будет великолепна

Answer 1

Другие решения, опубликованные до сих пор, работают, но ужасно неэффективны. Вот лучшее решение:

var isZoom = false;
$('#some-link').click(function(e) {
  e.preventDefault();
  $('img').each(function() {
    this.src = isZoom ? this.src.replace('_pw.jpg', '.jpg') : this.src.replace('.jpg', '_pw.jpg');
  });
  isZoom = !isZoom;
});

Предполагается, что все изображения имеют одинаковое расширение .jpg.

Кроме того, вы можете использовать .attr вместо .each:

var isZoom = false;
$('#some-link').click(function(e) {
  e.preventDefault();
  $('img').attr('src', function(i, src) {
    return isZoom ? src.replace('_pw.jpg', '.jpg') : src.replace('.jpg', '_pw.jpg');
  });
  isZoom = !isZoom;
});

Answer 2

// Get all your zoomable images (maybe with some special class to identify them)
// Iterate over them
$('img.specialClass').each(function() {

    // Get original src attribute
    var origSrc = this.src; 

    // Split by slash
    var arraySrc = origSrc.split('/'); 

    // New src attribute is:
    var newSrc = arraySrc.slice(0,-1).join('/') + // all but last parts of URL
    '/pw_' + // with a new prefix
    arraySrc.slice(-1); // and the original file name

    // Finally, set the new src attribute
    this.src = newSrc;
})

Answer 3

Возможно, есть более краткий способ написания, но, тем не менее, это простая операция:

 $('#pinkButton').click(function()
 {
      $('img').each(function()
      {
           $(this).attr('src', $(this).attr('src') + '_pw');
           // Will take the previous src attribute and add '_pw' in the end.
      });
 });

Вероятно, потребуется внести некоторые изменения в вышеприведенное, чтобы поместить суффикс в правильное место строки src, но вы поняли идею. (в основном, убедитесь, что расширение перемещено и т. д.)

Answer 4

$("img").attr('src', function(i,a) {
    return a + '_pw';
});

Answer 5

$('IMG').attr('class','_pw');

Следует установить для всех имен классов IMG значение "_pw".

т.е:

$('#mybutton').click(function(){
   $('IMG').attr('class','_pw');
});