我想做的事情很简单。当我单击图像时，我希望显示一些消息。 之后，当我再次单击它时，我希望它消失。我在实现它时遇到问题 由于我缺乏 jQuery 知识。我希望对以下代码以及其他一些实现有所帮助。我知道我可以用 class="hidden"做一些事情并让 jQuery 添加/删除它，但是哦，好吧。
这就是我正在尝试的工作。
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
编辑:似乎我应该使用 a.value，但我也一定做错了其他事情。
最佳答案
如果您使用 jQuery，这非常简单；只需使用它作为您的 JavaScript(不要忘记链接 jQuery 主库 - 我喜欢 Google CDN)。只需使用 toggle function :
function greet() {
$('#here').toggle();
}
此外，最好通过 jQuery 而不是您的 html 来注册 onClick(例如，参见 this SO question )。所以整个页面会是这样的:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example在 jsFiddle 中。
关于javascript - 单击后显示和隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23298757/