通过javascript单击更改背景图像数组

Question

我是 javascript 的初学者，有以下问题。

当用户单击它时，我想更改 div 的背景图像。 但不仅仅是一张图片，而是通过一系列图片。 这样每次点击都会出现一张新图片。 (1.jpg, 2.jpg, ..., 5.jpg) 必须通过替换css背景图片url来完成，否则其他功能将不再起作用。 到目前为止，我每次点击只能交换一张图片。

这是当前的代码：

HTML：

<div class = "image"></div>

CSS：

.image{
   position: absolute;
   background-image: url ("1.jpg");
   background-size: cover;
}

JS：

$ (document) .ready (function () {
           $ (". image"). on ("click", function () {
               $ (". image"). css ({'background-image': 'url (2.jpg)'});
           });
   });

感谢您的帮助！

Answer 1

你可以这样做，比如有5张图片，制作images 5：

// possible image count
const images = 5;

$(document).ready(function () {
  let current = 0;
  $(".image").on("click", function () {
    $(".image").css({ 'background-image': `url(${++current % images + 1}.jpg)` });
  });
});

---

如果您有一个非数字图像列表，您可以手动为它创建一个数组，如下所示：

// put all possible image urls in this list
const images = ['1.jpg', '2.jpg', '3.jpg', 'cat.jpg', 'dog.jpg'];

$(document).ready(function () {
  let current = 0;
  $(".image").on("click", function () {
    $(".image").css({ 'background-image': `url(${images[++current % images.length]})` });
  });
});

Answer 2

不确定我是否正确理解你的问题，你想要这样的东西吗？

let index = 1;
$ (document).ready (function () {
  $ (".image").on("click", function () {
    $ (".image").css({'background-image': 'url (' + index + '.jpg)'});
    index++;
  });
});