Форум

skrudjmakdak · #11 (**permalink**) 08.09.2014, 13:40

а я честно говоря вообще противник вот этого вот (имхо):

onclick='showAnswer(1)'

куда лучше обернуть в еще один див. навешать события циклом и работать с dom. может я не прав, но я бы сделал так. ни каких айдишников, номеров и прочей шняги

ksa · #12 (**permalink**) 08.09.2014, 13:52

Сообщение от Webtest

теперь ищу как сделать кое-что дургое...

Твои планы просто потрясают!

<!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>

skrudjmakdak · #13 (**permalink**) 08.09.2014, 13:57

лучше используй 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>

Webtest · #14 (**permalink**) 08.09.2014, 14:29

ksa, большое спасибо, мастер.

Webtest · #15 (**permalink**) 08.09.2014, 14:30

skrudjmakdak, ну я хочу, для начала, яваскрипт подучить получше.

Webtest · #16 (**permalink**) 08.09.2014, 19:32

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)'>

skrudjmakdak · #17 (**permalink**) 08.09.2014, 20:43

оно?

<!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>

Webtest · #18 (**permalink**) 09.09.2014, 11:09

skrudjmakdak, оно. Спасибо!

Форум

Справочник

Discord чат

Курсы javascript