4

次のコードを使用して非表示の 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';
}

これを調整して、それを起動した要素を非表示にするにはどうすればよいですか?

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」で2番目のパラメータ（this）を送信します。これは、画像要素自体です。

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

次に、関数はそれに「displaynone」を適用します。

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 に答える