web-dev-qa-db-ja.com

div onclickを表示し、それをトリガーした画像を非表示にします

次のコードを使用して非表示のdivonclickを表示したいのですが、表示されたときに、トリガーに使用した画像を非表示にします。これが私がこれまでに持っているものです：

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

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

javascriptonclickshow-hide
4
codeChris

ジミーの答えは機能しますが、それを元に戻すには（私はあなたがそれを望んでいると思います）、画像タグに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';
}
6
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>
2
cregox

[編集]

関数を次のように変更します：

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

そしてこれに対するonclick属性：

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

「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コードを使用することをお勧めします。

1
ecairol