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，这是一个简单的示例，您可以将背景颜色替换为图像

＆＃13;

$( "div" ).click(function() {
  $( this ).toggleClass( "change" );
});

＆＃13;

#box{
  background-color:red;
  width:300px;
  height:300px;
}

#box.change{
  background-color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class=""></div>

＆＃13;

Answer 2

不需要所有代码。您只需要两个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>

Answer 3

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

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

具有相同的网址，因此没有任何变化。

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

Answer 4

这是一个非常简单的脚本，我使用了数据属性来存储第二张图片，我把它们抓成一个数组并旋转。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

我想在这里发布解决方案，只是有人遇到这个问题而其他解决方案也无法在他们的环境中工作。

以下是代码：

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>

感谢大家的回复！

Javascript：点击后更改图片，然后再次点击时返回原始版本

5 个答案: