每次單擊按鈕時如何將背景圖像更改為不同的圖像？

Question

我正在使用jQuery嘗試在每次單擊按鈕時更改background-image 。 目前，每次單擊按鈕時，我的背景都會經歷一個for循環，因此圖片會直接從我文件夾中的第一張圖片到最后一張圖片。

我知道這不是我的目標，但這是我唯一能夠在不拋出錯誤的情況下工作的東西：

$('#bg-change').on('click', function() {
  for (let i = 1; i < 5; i++) {
    $('#background').css('background-image', 'url("./img/blank-wall'+i+'.jpg"')
  };
});

我試過使用數組和切換類，但它只能讓它在兩個圖像之間改變。

請幫忙！

Answer 1

您不需要for循環，您可以只使用一個計數器變量和一個if語句，它應該可以工作。

let imgIndex = 0;

$('#bg-change').on('click', function() {
  imgIndex ++;

  if (imgIndex > 4) {
    imgIndex = 1;
  }

  $('#background').css('background-image', 'url("./img/blank-wall'+imgIndex+'.jpg"')
});

Answer 2

你可以試試這個：

let num = 1 // Counter
const picNum = 5 // Number of images in a folder
$('#bg-change').on('click', function() {
  if (num == picNum){
    num = 1
  }else {
     num += 1
  }
  $('#background').css('background-image', 'url("./img/blank-wall'+num+'.jpg"')
});

首先，您應該指定圖像的數量，然后定義一個變量（num），每次單擊按鈕時向其添加 1，或者如果它等於圖像的數量，只需將其重新定義為 1，然后它可以通過以下方式更改背景num變量的值。