Question

抱歉，我是编程jQuery的新手。我有一个带有一些图像的页面，我只是想围绕它们。

我的意思是，我想移动第一张图像代替第二张图像，第二张图像代替第三张图像，依此类推，直到最后一张图像移动到第一张图片。每次按下按钮都会发生这种情况。

在Javascript中，这非常简单，例如：

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;

现在我试图在jQuery中实现相同的转变，我想知道是否有一些简单的技巧可以使用。有人可以帮帮我吗？

Answer 1

实际上使用普通的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;
});

Answer 2

我个人不会如此紧密地联系到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'));
    });
  });
});

不完全漂亮..

在jQuery中循环遍历图像

2 个答案: