本文介绍如何使用纯原生JavaScript实现图片的显示与隐藏，以及点击按钮切换图片的功能。通过监听按钮点击事件，动态修改图片的src属性和按钮文本，并添加状态判断逻辑，确保图片隐藏时无法切换，从而完成一个完整的交互示例。
原生JS实现图片显示隐藏与点击切换功能
本文旨在通过标题即可明确的内容，展示纯原生JavaScript代码的实现细节。
首先明确具体需求：
1. 页面包含两个按钮，分别标记为“显示”和“换”。
2. 点击“显示”按钮时，按钮文字变为“隐藏”，同时图片可见；反之，点击“隐藏”按钮时，按钮文字变回“显示”，图片随之隐藏。
3. 点击“换”按钮时，图片切换为另一张；再次点击则恢复原图。
4. 当图片处于隐藏状态时，禁止执行切换操作。
以下是具体代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换图片</title>
</head>
<body>
<button id="btn">隐藏</button>
<button id="btu">换</button>
<img src="11.jpg" id="img" width="300px" />
</body>
<script>
var btn = document.getElementById("btn");
var btu = document.getElementById("btu");
var img = document.getElementById("img");
var xia = 0;
btn.addEventListener("click",function (){
//判断按钮文字内容
if(btn.innerText == "隐藏"){
//当按钮文字为隐藏时,图片隐藏
img.style.opacity = 0;
//同时,按钮文字变成现实 下面同理
btn.innerText = "显示";
}else{
img.style.opacity = 1;
btn.innerText = "隐藏";
}
});
var imgs = ["11.jpg","12.jpg"];
//给"换"添加点击事件
btu.addEventListener("click",function (){
if(btn.innerText == "隐藏"){
if(xia < 1){
xia++;
}else{
xia = 0;
}
img.src = imgs[xia];
}else{
alert("图片隐藏，不能切换");
}
});
</script>
</html>
代码逻辑简洁，是否已掌握？