Цитирование изображений в jQuery

Question

Извините, но я новичок в программировании jQuery. У меня есть страница с некоторыми изображениями, и я просто хочу окружить их.

Я хочу, чтобы я переместил первое изображение вместо второго, второе вместо третьего и так далее, до последнего, которое будет перемещено в первую очередь. Это должно происходить каждый раз, когда я нажимаю кнопку.

В Javascript это довольно straitforward, что-то вроде этого, например:

V = document.getElementsByTagName("img"); 
K = V[V.length - 1].src 
for (i = V.length - 1; i > 1; i--) 
{ 
    V[i].src = V[i - 1].src; 
} 
v[0].src = K; 

Теперь I'am пытается реализовать один и тот же сдвиг в JQuery и мне интересно, если есть простой трюк, чтобы использовать. Кто-нибудь может мне помочь?

Answer 1

Я лично не буду так сильно связывать его с img. Вы добавляете другое изображение на страницу и получаете нежелательные результаты.

jQuery .each() documentation.

непроверенная, но что-то, как это будет работать:

$(document).ready(function() { 
    $('js-image-swap').on('click', function() { 

    var $images = $('img.swap-image'); 

    var lastIndex = $images.length - 1; 

    $images.each(function(index, $img) { 
     if (index == lastIndex) 
     $img.attr('src', $images.first().attr('src')); 
     else 
     $img.attr('src', $images.get(index +1).attr('src')); 
    }); 
    }); 
}); 

Не совсем довольно ..

Answer 2

На самом деле с равниной Javascript это даже проще, чем вы писали (нет необходимости в JQuery, это добавляет тяжелый нагрузка).

const images = document.getElementsByTagName("img"); 
let nextImageSrc = images[images.length - 1].src; 

Array.from(images).forEach((img) => { 
    const tmp = img.src; 
    img.src = nextImageSrc; 
    nextImageSrc = tmp; 
}); 

---

Если вы сделать использовать JQuery вы можете сделать то же самое:

const $images = $("img"); 
let nextImageSrc = $images.last().attr('src'); 

$images.each((i, img) => { 
    const tmp = img.src; 
    img.src = nextImageSrc; 
    nextImageSrc = tmp; 
});