使图像出现，而其他图像通过单击按钮消失

Making images appear AND other images disappear with the click of a button

本文关键字：图像 单击 消失 按钮 其他      更新时间：2023-09-26

我的网页遇到了一些问题。我连续研究了这个话题30分钟，仍然没有找到直接的答案。

如果我单击按钮 1：

  • 图像 1 可见

  • 图像2 不可见

  • 图像3 不可见

如果我点击按钮2：

  • 图像 1 不可见

  • 图像2 可见

  • 图像3 不可见

如果我点击按钮3：

  • 图像 1 不可见

  • 图像2 不可见

  • 图像3 可见

这是我的Javascript：

function rock(){
document.getElementById('image1').style.display = 'block';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'none';
}
function paper(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'block';
}
document.getElementById('image3').style.display = 'none';
}
function scissors(){
document.getElementById('image1').style.display = 'none';
}
document.getElementById('image2').style.display = 'none';
}
document.getElementById('image3').style.display = 'block';
}

这是我的 HTML：

<button id="rock" onclick="rock()">Rock</button>
<button id="paper" onclick="paper()">Paper</button>
<button id="scissors" onclick="scissors()">Scissors</button>

只需使用它来隐藏它：

document.getElementById("thingid").style.visibility="hidden";

使用它来显示它：

document.getElementById("thingid").style.visibility="visible";

此页面上非常好的教程：http://www.w3schools.com/jsref/prop_style_visibility.asp

第二个建议：你可以使用jQuery来创建漂亮的过渡效果

  1. 为所有按钮提供 ID
  2. 为所有图像提供 ID
  3. 添加事件处理程序到每个按钮

  4. 像这样隐藏图像

    document.getElementById（"id-of-the-image"）.style.display = "none";

  5. 显示这样的图像

    document.getElementById（"id-of-the-image"）.style.display = "inline-block";

您的代码（更正） 

function rock(){
    document.getElementById('image1').style.display = 'block';
    document.getElementById('image2').style.display = 'none';
    document.getElementById('image3').style.display = 'none';
}
function paper(){
    document.getElementById('image1').style.display = 'none';
    document.getElementById('image2').style.display = 'block';
    document.getElementById('image3').style.display = 'none';
}
function scissors(){
    document.getElementById('image1').style.display = 'none';
    document.getElementById('image2').style.display = 'none';
    document.getElementById('image3').style.display = 'block';
}

代码的优化版本

function showImage(imageId) {
    document.getElementById(imageId).style.display = 'block';
}
function hideImage() {
    document.getElementById(imageId).style.display = 'none';
}

function rock(){
    showImage('image1');
    hideImage('image2');
    hideImage('image3');
}
function paper(){
    hideImage('image1');
    showImage('image2');
    hideImage('image3');
}
function scissors(){
    hideImage('image1');
    hideImage('image2');
    showImage('image3');
}
相关文章：