Javascript:在点击时更改图像，然后再次点击时返回原始图像

Javascript: Changing an image on click and then back to original when clicked again

本文关键字：图像 原始 返回 然后 Javascript      更新时间：2023-09-26

你好，我一直在找，我似乎找不到我要找的东西。我尝试了其他帖子中建议的一些解决方案，但都没有对我有利。

标题几乎总结了我想要完成的事情，如果你需要更多的信息，请留下评论，询问你想知道的。

这段代码的主要部分，我想得到的工作是myFunction，其余的是我做的例子，这样人们可以更好地理解我的思维过程，下面是代码:

function myFunction() {
    var demoStyle = document.getElementById("demo").style.backgroundImage;
    var blue = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)";
    var red = "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)";
    var x = (demoStyle == blue);
    if (demoStyle == blue) {
        demoStyle = blue;
        document.getElementById("demo").innerHTML = "Should have turned Blue";
        alert('Is the document Blue? Javascript says: ' + x + '.');
    } else {
        demoStyle = red;
        document.getElementById("demo").innerHTML = "Should have turned Red";
        alert('Is the document Red? Javascript says: ' + x + '.');
    }
}
function myFunction_NoVars() {
    if (document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)") {
        document.getElementById("demoNoVars").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)";
        document.getElementById("demoNoVars").innerHTML = "Should have turned Blue";
    } else {
        document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)"
        document.getElementById("demoNoVars").innerHTML = "Should have turned Red";
    }
}
function my_2nd_Function() {
    document.getElementById("demo2").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg)";
    document.getElementById("demo2").innerHTML = "Should have turned Red";
}
div {text-align:center;padding:5px;height:100px;width:100px;background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);}
button {margin-top:10px;padding:5px;min-width:50px;}
h2 {margin:0;padding:0;}
hr {margin-bottom:10px;padding:0;}
<h2>Has Errors:</h2><hr />
    <div id="demo"></div>
    <button onclick="myFunction()">Run</button>
<br /><br />
    <div id="demoNoVars"></div>
    <button onclick="myFunction_NoVars()">Run w/ No Variables</button>
<br /><br />
<h2>Doesn't Have Errors:</h2><hr />
    <div id="demo2"></div>
    <button onclick="my_2nd_Function()">Run</button>
    <p><strong>NOTE:</strong> This one changes, but I'm trying to create something that will change between the two every time the button is clicked.</p>

在这里也有一个实时预览，在这里JSfiddle。谢谢你的帮助。

如果您正在使用jQuery，这是一个简单的例子，您可以将背景颜色替换为image

$( "div" ).click(function() {
  $( this ).toggleClass( "change" );
});
#box{
  background-color:red;
  width:300px;
  height:300px;
}
#box.change{
  background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class=""></div>

不需要所有这些代码。您只需要两个CSS规则和切换类名。一个CSS规则有一个图像，另一个规则有另一个图像。添加类后，第二个图像出现。

var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    document.getElementById(this.dataset.for).classList.toggle("active");
  });
}
div.x {
  height: 100px;
  width:100px;
  background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);
}
div.x.active {
  background-image: url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg);
}
<div class="x" id="demo"></div>
<button data-for="demo">Run</button>
<div class="x" id="demo2"></div>
<button data-for="demo2">Run</button>

第一个函数不设置背景图像。所以它没有改变也就不足为奇了。第二个函数检查它是否为蓝色，如果是，则将其设置为蓝色。第二个函数不改变它，它只是确认现有状态。

if (document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)") {
    document.getElementById("demoNoVars").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)";

有相同的url，所以没有改变。

你应该在第二个函数中交换你的if条件，第一个函数应该设置背景

这是一个非常简单的脚本，我使用了一个data-attribute来存储你的第二个图像，我将这些抓取到一个数组中并旋转。

var imgs = document.querySelectorAll('img');
[].slice.apply(document.querySelectorAll('img')).forEach(function (f) {
  var im = [ f.getAttribute("src"), f.getAttribute("data-src2") ];
  f.onclick = function () {
    var k = im.shift(1); im.push(k);
    f.setAttribute("src", im[0]);
  };
});
<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">
<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">
<img src="http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg"
     data-src2="http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg">

在将其中一些答案移动到我的环境中时，我遇到了一些问题，但是使用它们做更多的研究，我发现了一些对我有用的东西。

我想把解决方案贴在这里，以防有人遇到这个问题，而其他解决方案在他们的环境中也不起作用。

代码如下:

function myFunction() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("red") == -1) {
        x.className = x.className.replace("blue", " red");
    } else {
        x.className = x.className.replace("red", " blue");
    }
}
.blue {
    height: 100px;
    width:100px;
    background-image:url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg);
}
.red {
    height: 100px;
    width:100px;
    background-image: url(http://www.babybedding.com/images/fabric/solid-coral-fabric_smaller.jpg);
}
<div id="demo" class="blue"></div>
<button onclick="myFunction()" >Button</button>

感谢大家的回复!

let x = document.getElementById("image1");
let state = false;
function transition() {
  x.src = state ? "image.jpg" : "image2.jpg";
  state = !state;
}
body {
  display: grid;
  justify-content: center;
  align-items: center;
}
img {
  cursor: pointer;
  width: 10em;
  height: 10em;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <img src="image.jpg" id="image1" onclick="transition()">
  <script src="script.js"></script>
</body>
</html>

相关文章：