javascript 显示一个 div onclick 并隐藏触发它的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15229732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show a div onclick and hide the image that triggered it
提问by codeChris
I would like to use the following code to display a hidden div onclick, but then when the it is displayed, I want the image that I used to trigger it to disappear. Here is what I have so far:
我想使用下面的代码来显示一个隐藏的 div onclick，但是当它显示时，我希望我用来触发它的图像消失。这是我到目前为止所拥有的：
HTML:
HTML：
<img src="Icons/note_add.png" onclick="show('comment')"/> <div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea> <a href="#" class="buttonintable">Submit</a></div>
JS:
JS：
function show(target){
document.getElementById(target).style.display = 'block';
}
function hide(target){
document.getElementById(target).style.display = 'none';
}
How do adjust this to hide the element that fired it?
如何调整它以隐藏触发它的元素？
回答by Chris
Jimmy's answer will work, however to get it to show back up (I assume you want that) you should add an id to the image tag... The following should work.
吉米的回答会起作用，但是要让它显示出来（我假设你想要），你应该向图像标签添加一个 id ......以下应该有效。
<img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/> <div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea> <a href="#" class="buttonintable">Submit</a></div>
function show(target){
document.getElementById(target).style.display = 'block';
document.getElementById("clickMeId").style.display = 'none';
}
function hide(target){
document.getElementById(target).style.display = 'none';
document.getElementById("clickMeId").style.display = 'block';
}
回答by James Coyle
[edited]
[编辑]
Change the function to this:
把函数改成这样：
function show(this, target){
document.getElementById(target).style.display = 'block';
this.style.display = 'none';
}
And the onclick attribute to this:
和 onclick 属性：
<img onclick="show(this, 'comment')" />
回答by cregox
I rather simplify the context to highlight what matters, inspired by Chris's answer:
受Chris 回答的启发，我宁愿简化上下文以突出重要事项：
<img id="clickMeId" onclick="show('comment'); hide('clickMeId')" alt="click me">
<div id="comment" style="display:none;"> yada yada </div>
<script>
function show (toBlock){
setDisplay(toBlock, 'block');
}
function hide (toNone) {
setDisplay(toNone, 'none');
}
function setDisplay (target, str) {
document.getElementById(target).style.display = str;
}
</script>回答by ecairol
Send a second parameter (this) on the "onclick", that would be the image element itself
在“onclick”上发送第二个参数（this），这将是图像元素本身
<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:
然后该函数将对其应用“显示无”：
function show(target, trigger){
document.getElementById(target).style.display = 'block';
trigger.style.display = "none"
}
But all of this is obtrusive Javascript code, I would recommend you use unobtrusive JS code.
但所有这些都是引人注目的 Javascript 代码，我建议您使用不引人注目的 JS 代码。
回答by ArthasNed_StarkGimli
Using jquery this is easy. $("#yourdivid").hide();
使用 jquery 这很容易。$("#yourdivid").hide();
