通過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++;
  });
});