web-dev-qa-db-fra.com

Afficher une div onclick et masquer l'image qui l'a déclenchée

Je voudrais utiliser le code suivant pour afficher un div onclick caché, mais ensuite, quand il est affiché, je veux que l'image que j'ai utilisée pour la déclencher disparaisse. Voici ce que j'ai jusqu'à présent:

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

Comment ajuster cela pour cacher l'élément qui l'a tiré?

javascriptonclickshow-hide
4
codeChris

La réponse de Jimmy va marcher, mais pour la faire remonter (je suppose que vous voulez ça), vous devez ajouter un identifiant à la balise image ... Ce qui suit devrait fonctionner.

<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

Je simplifie plutôt le contexte pour souligner ce qui compte, inspiré par La réponse de 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

[édité]

Change la fonction en ceci: 

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

Et l'attribut onclick à ceci:  

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

Envoyer un deuxième paramètre (this) sur le "onclick", ce serait l'élément d'image lui-même

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

alors la fonction lui appliquerait un "display none":

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

Mais tout ceci est du code Javascript intrusif, je vous recommanderais d’utiliser un code JS discret.

1
ecairol