Question

我有两张图片：images/pic2.png和src。我想做这样的事情：当我第一次点击图片（pic1）时，它会将images/pic2.png更改为if(...) ... else{...}，然后显示第二张图片。接下来，我再次点击（第二次），然后再次显示我的第一张图像。如果我第三次点击，我的第二个img会再次显示。 一次又一次。

另外，我想用循环<img src="images/pic1.png" id="myImage"/>制作它。

这是我的代码：

HTML

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";}});

JS

<?php
  date_default_timezone_set('Europe/London');
  $time_stamp = date('Y-m-d H:i:s');
  $stmt = $con->prepare("INSERT INTO tablename (datetime) VALUES ('".$time_stamp."')");
  $stmt->execute();
?>

我不知道还能做什么...

Answer 1

这是一个工作示例，显示您的代码正常工作。除非因为ABSOLUTE VS RELATIVE URL而出现问题。

＆＃13;

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";}});

＆＃13;

<img src="http://placehold.it/350x150" id="myImage"/>

＆＃13;

Answer 2

我创建了这个小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";
  }
});

Answer 3

另一种方法是使用dataset Attribute作为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; }

Answer 4

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"/>

使用事件侦听器更改图像

4 个答案: