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

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

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

источник

2013-03-05 boy

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

<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-05 17:08:28 Chris

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

Изменение функции для этого:

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

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

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

источник

2013-03-05 17:04:43

Использование 'onclick' инлайн, вы должны пройти' this'. При использовании его как 'element.onclick = function;' вы этого не делаете, и ни с 'addEventListener'. – Ian

@Ian Мысли так. Спасибо за разъяснения! –

-2

Использование JQuery это легко. $ ("# yourdivid"). Hide();

источник

2013-03-05 17:04:53

Отправить второй параметр (это) на «OnClick», который будет сам элемент изображения

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

, то функция не будет применить «дисплей нет» к нему:

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

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

источник

2013-03-05 17:10:15 ecairol

я скорее упростить контекст, чтобы подчеркнуть, что вопросы, вдохновленный Chris's answer:

<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-13 12:58:42 cregox

Как добавить эффект fadeIn onClick? – 2015-12-11 00:45:08

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

ответ

Смежные вопросы