使用事件侦听器更改图像

Change image using event listener

本文关键字：图像 侦听器 事件      更新时间：2023-09-26

我有两个图像：images/pic1.png和images/pic2.png。我想做这样的东西：当我第一次点击图像（pic1）时，它将其src更改为images/pic2.png，然后显示第二个图像。接下来，我再次点击（第二次），我的第一个图像再次显示。如果我第三次点击，我的第二个img将再次显示一次又一次

此外，我想用循环if(...) ... else{...}来制作它。

这是我的代码：

HTML

<img src="images/pic1.png" id="myImage"/>

JS

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
  if(img.src != "images/pic2.png"){
    img.src = "images/pic2.png";}
  else{
    img.src = "images/pic1.png";}});

我不知道还能做什么…

这里有一个工作示例，显示您的代码运行良好。除非你有一个问题，因为绝对VS相对URL。

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
  if(img.src != "http://placehold.it/350x150/ff0000"){
    img.src = "http://placehold.it/350x150/ff0000";}
  else{
    img.src = "http://placehold.it/350x150";}});
<img src="http://placehold.it/350x150" id="myImage"/>

我已经创建了这个小的jsfiddle

<img id='myImg' width='40px' height='40px' src="//i.imgur.com/COFscX6.jpg" />
var img = document.getElementById("myImg");
img.addEventListener("click", function() {
  if (this.classList.contains('changed')) {
    this.src = '//i.imgur.com/COFscX6.jpg';
    this.className = "";
  } else {
    this.className = "changed";
    this.src = "//i.imgur.com/rznnhRq.jpg";
  }
});

另一种方法是使用dataset属性作为id。

这将允许您在更多的图像之间进行更改。

function toggle(){
 img.src='images/pic'+(
  img.dataset['id']=img.dataset['id']++<2?img.dataset['id']:1
 )+'.png';
 img.alt='images/pic'+(img.dataset['id'])+'.png';
}
var img=document.getElementById('myImage');
img.onclick=toggle;
<img src="images/pic1.png" data-id="1" id="myImage">

在上述情况下，2是最大值，1是第一个图像

img.dataset['id']=img.dataset['id']++<2?img.dataset['id']:1

可读：

if( img.dataset['id']<2 ){
 img.dataset['id'] + 1;
}else{
 img.dataset['id'] = 1;
}

HYG在插入新的之前，您需要清空src

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
console.log(img.src);
  if(img.src != "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic2"){
  console.log("not true");
    img.src = "";
    console.log(img.src);
    img.src="https://placeholdit.imgix.net/~text?txtsize=33&txt=pic2";
    }
  else{
    img.src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic1";}});
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=pic1" id="myImage"/>

相关文章：