4

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

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

4

5 回答 5

6

吉米的回答会起作用，但是要让它显示出来（我假设你想要那个），你应该在图像标签中添加一个 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';
}
于 2013-03-05T17:08:28.627 回答
2

[编辑]

把函数改成这样：

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

而 onclick 属性对此： 

<img onclick="show(this, 'comment')" />
于 2013-03-05T17:04:43.413 回答
2

受克里斯的回答启发，我宁愿简化上下文以突出重要的内容：

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

于 2014-11-13T12:58:42.133 回答
1

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

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

然后该函数将对其应用“无显示”：

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

但所有这些都是突兀的 Javascript 代码，我建议您使用不突兀的 JS 代码。

于 2013-03-05T17:10:15.963 回答
-2

使用 jquery 这很容易。$("#yourdivid").hide();

于 2013-03-05T17:04:53.480 回答