Question

我试图根据if / else声明的结果在javascript中切换图片，但我尝试过的并不起作用。我该如何解决这个问题？

这是我的剧本：

var coin = document.getElementById(coin);
var coin = Math.round(Math.random());
var result;

if (coin === 1) {
document.getElementById("flip").src = "heads.jpg"
} else {
document.getElementById("coin").src = "tails.jpg"
};

document.write(result);

这是html：

 <h1>Make your decision!</h1>

 <img id="flip" src=".../img/heads.jpg">
 <img id="coin" src=".../img/tails.jpg">

 <script src="js/script.js"></script>

</body>

Answer 1

如果要通过javascrip编辑src，则需要添加完整路径，例如：

if (coin === 1) {
document.getElementById("flip").src = ".../img/heads.jpg"
} else {
document.getElementById("coin").src = ".../img/tails.jpg"
};

但我会建议使用课程。为硬币定义一个类：

.coin {
    background-image: url(".../img/heads.jpg");
}

然后创建另一个翻转的类：

.coin.flipped {
    background-image: url("../img/tails.jpg");
}

然后在您的javascript代码中，您将添加该类或删除该类，具体取决于您是希望图像是头还是尾。甚至是Toggle课程。请注意，此解决方案需要Jquery。

$(<elemselector>).AddClass("flipped ")
$(<elemselector>).RemoveClass("flipped ")
$(<elemselector>).ToggleClass("flipped ")

在Coinflip游戏中切换图像

1 个答案: