javascript - 使用 JavaScript 更改活动彩色图像
问题描述
请看一下这个 JSFiddle。
我试图编写一些 JS 来制作它,以便当单击底行中的一种颜色时,顶行中的图像会发生变化。我在 JS 中包含了应该更改的图像(它们都保存在 imgur 上)。
不幸的是,什么都没有发生。怎么了?
HTML
<div class = "row">
<div class="active">
<img id="active-color" src="https://i.imgur.com/wSRf1kZ.png"/>
</div>
</div>
<div class="row">
<div class="other-color">
<img id ="black" src="https://i.imgur.com/NzYkFkO.png" onclick="changeImage()"/>
</div>
<div class="other-color">
<img id ="green" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
</div>
<div class="other-color">
<img id="pink" src="https://i.imgur.com/8oTZjc9.png" onclick="changeImage()"/>
</div>
<div class="other-color">
<img id="blue" src="https://i.imgur.com/oFSqOUp.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
</div>
<div class="other-color">
<img id="brown" src="https://i.imgur.com/xbj7l5p.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
</div>
</div>
CSS
.row {
display: flex;
margin-bottom: 20px;
width: 100%;
}
.other-color {
width: 50px;
height: 50px;
display: block;
}
JS
//green on white
//https://i.imgur.com/04hDBLJ.png
//pink on white
//https://i.imgur.com/FG9voBX.png
//blue on white
//https://i.imgur.com/SmNcXqY.png
//brown on white
//https://i.imgur.com/erFfzyQ.png
function changeImage() {
//if black, stay black
if (document.getElementById("active-color").src == "https://i.imgur.com/NzYkFkO.png")
{
document.getElementById("active-color").src = "https://i.imgur.com/wSRf1kZ.png";
}
//if green, turn green
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png")
{
document.getElementById("active-color").src = "https://i.imgur.com/04hDBLJ.png";
}
//if pink, turn pink
if (document.getElementById("active-color").src == "https://i.imgur.com/8oTZjc9.png")
{
document.getElementById("active-color").src = "https://i.imgur.com/FG9voBX.png";
}
//if blue, turn blue
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png")
{
document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
}
//if brown, turn brown
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png")
{
document.getElementById("active-color").src = "https://i.imgur.com/erFfzyQ.png";
}
}
任何 jQuery 解决方案也可以。
解决方案
您需要将点击内容的数据传输到该功能以进行检查。就像现在一样,没有办法检查在您的 Javascript 中单击了哪个元素并获取其 src。希望这可以帮助。
html:
<div class="other-color">
<img id="blue" src="https://i.imgur.com/oFSqOUp.png" onclick="changeImage(this.src)"/>
</div>
js:
function changeImage(src) {
if (src == "https://i.imgur.com/oFSqOUp.png"){
document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
}
}
推荐阅读
- c - 找不到我的猜谜游戏的解决方案
- c++ - C++ 链表只打印前 3 个节点
- javascript - Discord 机器人消息不收集反应
- postgresql - 如何在连接操作的结果中找到重复值?
- python - 我需要帮助来解释分数的报告值,以确定我的 ML 模型的最佳回归量
- powershell - 将 PowerShell 数据中的哈希表发送到 API 时出现问题
- java - 为什么在运行时创建泛型 List 不绑定正确的数据类型?
- android - 不要在 React native 中启动 Android 应用程序
- typescript - 使用 fetch 和 TypeScript 解码 JSON 会引发 eslint “预期在箭头函数末尾返回值”错误
- javascript - MapBox 调整大小地图的平滑过渡