显示div onclick并隐藏触发它的图像(Show a div onclick and hide the image that triggered it)

显示div onclick并隐藏触发它的图像(Show a div onclick and hide the image that triggered it)

我想使用以下代码来显示隐藏的div onclick，但是当它显示时，我希望我用来触发它的图像消失。 这是我到目前为止：

HTML：

<img src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

JS：

function show(target){ document.getElementById(target).style.display = 'block'; } function hide(target){ document.getElementById(target).style.display = 'none'; }

如何调整这个以隐藏触发它的元素？

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:

HTML:

<img src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

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?

最满意答案

吉米的答案会起作用，但为了让它显示回来（我假设你想要那样）你应该在图像标签上添加一个ID ......以下内容应该有效。

<img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<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'; }

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.

<img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<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'; }