webentwicklung-frage-antwort-db.com.de

Zeige ein div onclick und blende das Bild aus, das es ausgelöst hat

Ich möchte den folgenden Code verwenden, um einen verborgenen Div-Onclick anzuzeigen, aber wenn er angezeigt wird, möchte ich, dass das Bild, das ich verwendet habe, verschwunden ist. Folgendes habe ich bisher:

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

Wie können Sie dies anpassen, um das Element, das es ausgelöst hat, auszublenden?

4
codeChris

Die Antwort von Jimmy wird funktionieren, aber damit sie wieder angezeigt wird (ich gehe davon aus, dass Sie dies möchten), sollten Sie dem Image-Tag eine ID hinzufügen. Folgendes sollte funktionieren.

<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

Ich vereinfache eher den Kontext, um hervorzuheben, worauf es ankommt - inspiriert von Chris's Antwort :

<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

[bearbeitet]

Ändere die Funktion dazu:

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

Und das Onclick-Attribut dazu:  

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

Senden Sie einen zweiten Parameter (this) auf den "Onclick", das wäre das Bildelement selbst

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

dann würde die Funktion ein "display none" anwenden:

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

Aber all das ist auffälliger Javascript-Code, ich würde empfehlen, unauffälligen JS-Code zu verwenden.

1
ecairol