Question

我想使用以下代码显示隐藏的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';
}

如何调整此项以隐藏触发它的元素？

Answer 1

Jimmy的回答是有效的，但为了让它显示回来（我假设你想要那样）你应该在图片标签上添加一个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';
}

Answer 2

[编辑]

将功能更改为：

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

onclick属性：

<img onclick="show(this, 'comment')" />

Answer 3

我宁愿简化上下文，突出重点，受Chris's answer的启发：

<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>

Answer 4

在“onclick”上发送第二个参数（this），这将是图像元素本身

<img src="Icons/note_add.png" onclick="show('comment', this)"/>

然后该函数将对其应用“display none”：

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

但所有这些都是突兀的Javascript代码，我建议你使用不引人注目的JS代码。

Answer 5

使用jquery这很容易。 $（ “＃yourdivid”）隐藏（）;

显示div onclick并隐藏触发它的图像

5 个答案: