Показать div onclick и скрыть изображение, которое его вызвало

Я хотел бы использовать следующий код для отображения скрытого 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';
}

Как настроить это, чтобы скрыть элемент, который его запустил?

5 4
javascript onclick show-hide

5 ответов:

Ответ Джимми будет работать, однако, чтобы получить его обратно (я предполагаю, что вы хотите этого), вы должны добавить идентификатор к тегу изображения... Должно сработать следующее.

<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

[отредактировано]

Измените функцию следующим образом: 

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

И атрибут onclick к этому: 

<img onclick="show(this, 'comment')" />
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>
2

Отправьте второй параметр (this) на "onclick", это будет сам элемент изображения 

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

Тогда функция применит к нему "display none": 

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

Но все это навязчивый Javascript-код, я бы рекомендовал вам использовать ненавязчивый JS-код.

1

С помощью jquery это легко. $("#yourdivid").Скрыть ();

-2