а я честно говоря вообще противник вот этого вот (имхо):
onclick='showAnswer(1)' куда лучше обернуть в еще один див. навешать события циклом и работать с dom. может я не прав, но я бы сделал так. ни каких айдишников, номеров и прочей шняги |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
div.showAnswer {
display: none;
}
</style>
<script type='text/javascript'>
function showAnswer(Obj,N) {
if (Obj.value=='Ответить') {
Obj.value='Отмена';
document.getElementById('hdn_'+N).className='';
} else {
Obj.value='Ответить';
document.getElementById('hdn_'+N).className='showAnswer';
}
};
</script>
</head>
<body>
<div class="showAnswer" id="hdn_1">
<textarea name="answerArea" class="textareaForAnswer"></textarea>
<input type="button" class="questionBtn" name="sendAnswer" value="Послать ответ">
</div>
<input type="button" class="questionBtn" name="answer" onclick='showAnswer(this,1)' value="Ответить">
</body>
</html>
|
лучше используй jquery. кода меньше и париться тоже
<html>
<head>
</head>
<body>
<div class="group">
<div class="form" style="display: none;">
<div><input type="text"></div>
<div><input type="button" value="click me"></div>
</div>
<div><input type="button" value="open"></div>
</div>
<div class="group">
<div class="form" style="display: none;">
<div><input type="text"></div>
<div><input type="button" value="click me"></div>
</div>
<div><input type="button" value="open"></div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$('input[value="open"]').click(function () {
$(this).parents('.group').find('.form').css('display', 'block');
});
</script>
</body>
</html>
|
ksa, большое спасибо, мастер.
|
skrudjmakdak, ну я хочу, для начала, яваскрипт подучить получше.
|
ksa, а как сделать тоже самое, но если заметно id будет класс?
Вот яваскрипт (я пробовал ваш пример изменить)
function showAll(tObj){
if (tObj.value == 'Показать остальные сообщения') {
tObj.value = 'Скрыть остальные сообщения';
document.getElementsByClassName('hiddenTR').style.display = 'block';
} else {
tObj.value = 'Показать остальные сообщения';
document.getElementsByClassName('hiddenTR').style.display = 'block';
}
}
Вот элемент <tr class="hiddenTR"> ЦСС
tr.hiddenTR {
display: none;
}
Кнопка <input type="button" value="Показать остальные сообщения" class="questionBtn" onclick='showAll(this)'> |
оно?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div.showAnswer {
display: none;
}
</style>
</head>
<body>
<div class="showAnswer" id="hdn_1">
<textarea name="answerArea" class="textareaForAnswer"></textarea>
<input type="button" name="sendAnswer" value="Послать ответ">
</div>
<input type="button" class="questionBtn" name="answer" value="Показать остальные сообщения">
<div class="showAnswer" id="hdn_1">
<textarea name="answerArea" class="textareaForAnswer"></textarea>
<input type="button" name="sendAnswer" value="Послать ответ">
</div>
<input type="button" class="questionBtn" name="answer" value="Показать остальные сообщения">
<div class="showAnswer" id="hdn_1">
<textarea name="answerArea" class="textareaForAnswer"></textarea>
<input type="button" name="sendAnswer" value="Послать ответ">
</div>
<input type="button" class="questionBtn" name="answer" value="Показать остальные сообщения">
<script type='text/javascript'>
var but = document.getElementsByClassName('questionBtn'); //найдет массив из 3 кнопок
for (var i = 0, ln = but.length; i< ln; ++i) {//делаем цикл по каждой кнопке
but[i].onclick = function () { //присвоим каждой кнопке событие onclick
if (this.value == 'Показать остальные сообщения') {
this.value = 'Скрыть остальные сообщения';
this.previousElementSibling.style.display = 'block'; //previousElementSibling найдет предыдущий dom элемент
} else {
this.value = 'Показать остальные сообщения';
this.previousElementSibling.style.display = 'none';
}
}
}
</script>
</body>
</html>
|
skrudjmakdak, оно. Спасибо!
|
| Часовой пояс GMT +3, время: 21:37. |