点击时显示一个div并隐藏触发它的图片。

Question

我将使用以下代码来在单击后显示隐藏的div，但是当它显示出来时，我希望触发它的图像消失。 以下是我目前的代码：

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

如何调整代码以隐藏触发它的元素？

- codeChris

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

- Chris

Answer 2

我想简化上下文，突出重点，受 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>

- cregox

---

如何在点击时添加fadeIn效果？ - user1556571

Answer 3

将该函数更改为以下内容：

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

将此onclick属性更改为：

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

- James Coyle

---

使用onclick内联时，您必须传递this。当将其用作element.onclick = function;时，您不需要传递this，也不需要使用addEventListener。 - Ian

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代码。

- ecairol

Answer 5

使用jQuery很容易实现。 $("#yourdivid").hide();

- ArthasNed_StarkGimli