Question

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

如果我点击button1：

image1 visible
image2 invisible
image3 invisible

如果我点击button2：

image1 invisible
image2 visible
image3 invisible

如果我点击button3：

image1 invisible
image2 invisible
image3 visible

这是我的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>

Answer 1

为所有按钮提供ID
为所有图片提供ID
Add event handler 到每个按钮
隐藏此类图片

document.getElementById（“id-of-the-image”）。style.display =“none”;
显示此类图片

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

Answer 2

只需使用它来隐藏它：

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

用它来表明：

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

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

第二个建议：您可以使用jquery创建漂亮的过渡效果

单击按钮可显示图像，其他图像消失

2 个答案: