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

Question

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

标题几乎概括了我要完成的工作，如果您需要更多信息，请发表评论询问您想知道的内容。

我想要运行的这段代码的主要部分是 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>

还有一个实时预览here , JSfiddle here .感谢您的帮助。

Answer 1

如果您使用的是 jQuery，这是一个简单的示例，您可以将背景颜色替换为图像

$( "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>