每次单击图像时，使用 Javascript 将图像更改为新图像

Question

我有一个图片文件夹，每次单击它时我都想用另一张图片替换当前显示的图片。

我已经设法使这种情况发生一次 - 即使 if 语句起作用，但我无法进入 elif 语句。为什么不满足elif条件。每次我点击它只是重复 if 语句，即使控制台日志显示 backgroundImage 现在是虎皮鹦鹉：url("http://localhost:3000/images_diamonds/budgies.jpg")

// For clicking on the image
document.querySelector('.diamond-pic').addEventListener('click', () => {
    
  let elem = document.getElementById('pic1');
  let ht = window.getComputedStyle(elem, null).getPropertyValue("background");
  console.log(ht)


  if (document.getElementById('pic1').style.backgroundImage="url(../../images_diamonds/ghecko.jpg)") {
    document.getElementById("pic1").style.backgroundImage = "url('../../images_diamonds/budgies.jpg'";
    console.log('if acheived')

  } else if (document.getElementById('pic1').style.backgroundImage="url(../../images_diamonds/budgies.jpg)") {
    document.getElementById("pic1").style.backgroundImage = "url('../../images_diamonds/Christmas_Beetle.jpg'";
    console.log('else if achived')

  } else {
    console.log('else achieved')
  }
});

Answer 1

执行此操作的最简单方法是将图像名称保存在一个数组中，然后在单击该图像时将其前进到数组中的下一个。

let counter = 0;
let imgs = [
  "https://static4.depositphotos.com/1026550/376/i/600/depositphotos_3763236-stock-photo-gold-star.jpg",
  "https://previews.123rf.com/images/lineartestpilot/lineartestpilot1803/lineartestpilot180302423/96543894-cartoon-shooting-star.jpg",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk5tGujYXbv4f9A0pvSuOWC6IhljTzmy4WBw&usqp=CAU",
  "http://www.webweaver.nu/clipart/img/nature/planets/smiling-gold-star.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/2000px-Red_star.svg.png"
];

document.querySelector("img").addEventListener("click", function(event){
  this.src = imgs[counter];
  // As long as the counter is less than the last index in the array
  // increase the counter. Otherwise, start over.
  counter = counter < imgs.length-1 ? counter+1 : 0;
});

img { width: 200px;}

<img src="https://previews.123rf.com/images/lineartestpilot/lineartestpilot1802/lineartestpilot180274309/95545188-shooting-star-decorative-cartoon.jpg">

下面是将图像用作背景的示例：

let counter = 0;
let imgs = [
  "https://static4.depositphotos.com/1026550/376/i/600/depositphotos_3763236-stock-photo-gold-star.jpg",
  "https://previews.123rf.com/images/lineartestpilot/lineartestpilot1803/lineartestpilot180302423/96543894-cartoon-shooting-star.jpg",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk5tGujYXbv4f9A0pvSuOWC6IhljTzmy4WBw&usqp=CAU",
  "http://www.webweaver.nu/clipart/img/nature/planets/smiling-gold-star.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/2000px-Red_star.svg.png"
];

document.querySelector("div").addEventListener("click", function(event){
  this.style.background = "url(" + imgs[counter] + ")";
  // As long as the counter is less than the last index in the array
  // increase the counter. Otherwise, start over.
  counter = counter < imgs.length-1 ? counter+1 : 0;
});

div { width: 300px;
      height:300px; border:1px solid black;  background:url("https://previews.123rf.com/images/lineartestpilot/lineartestpilot1802/lineartestpilot180274309/95545188-shooting-star-decorative-cartoon.jpg");
}

<div></div>

每次单击图像时，使用 Javascript 将图像更改为新图像

Change an image to a new image with Javascript each time the image is clicked

javascript

css

onclick

background-image

addeventlistener