Не работает стирание класса / добавление стиля.
Здравствуйте.
Подскажите, почему не работает? Есть код, который рисует несколько текстовых блоков с кнопкой <div class="showAnswer" id="hdn_<?php echo $showMessage['id'][$num]; ?>"> <textarea name="answerArea" class="textareaForAnswer"></textarea> <input type="button" class="questionBtn" name="sendAnswer" value="Послать ответ"> </div> Вот цсс дива: div.showAnswer {display: none;} т.е. он скрытый. Вот кнопка: <input type="button" class="questionBtn" name="answer" onclick='showAnswer(<?php echo $showMessage['id'][$num]; ?>)' value="Ответить"> Почему при нажатии на кнопку ничего не происходит? Вот JS код: 1 вариант:
function showAnswer(id) {
// alert(id);
document.getElementById('#hdn_'+id).removeClass('div.showAnswer');
}
2 вариант:
function showAnswer(id) {
// alert(id);
document.getElementById('#hdn_'+id).style.display = 'block';
}
Алерт выводит тот id на который я нажимаю, т.е. согласно этому коду должен либо убираться класс у id, который делает невидимым блок. Во-втором случае должен менятся стиль на блок. Но ни 1, ни во 2 случае ничего не происходит. Почему? Вот еще 3 вариант:
function showAnswer(id) {
document.getElementById('#hdn_'+id).className = document.getElementById('#hdn_'+id).className.replace('showAnswer', '');
}
|
выкиньте свой алерт нафиг. используйте отладчик f12 (в хроме встроенный, т.е. устанавливать не надо)
вот документация как пользоваться отладкой: http://learn.javascript.ru/debugging-chrome если вы сами научитесь отлаживать свой код, то это будет просто замечательно ;) |
skrudjmakdak, ну я смотрю через ф12, а через алерт вывожу значения в яваскрипте.
Кстати, я уже нашел почему не работало!!! Оказывается надо было удалить # в айдишниках, ЛОЛ. Но теперь другой вопрос, как сделать так, чтобы если я нажал 2 раз на кнопку, то форма обратно закрылась т.е. класс обратно приписался? |
вот пример:
<html>
<head>
<style>
div
{
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
</style>
</head>
<body>
<div></div><div></div>
<script type="text/javascript">
var divs = document.querySelectorAll('div');
divs[0].onclick = function () {
this.style.visibility = 'hidden';
divs[1].style.visibility = 'visible';
}
divs[1].onclick = function () {
this.style.visibility = 'hidden';
divs[0].style.visibility = 'visible';
}
</script>
</body>
</html>
|
skrudjmakdak, у меня, почему-то, не работает ваш вариант, а что писать в куериСелекторАл?
А можно ли как-то сделать это как продолжение этого кода на чистом яваскрипте?
function showAnswer(id) {
document.getElementById('hdn_'+id).classList.remove('showAnswer');
}
Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно. Как-то так. |
Цитата:
открываешь отладчик, вкладка sourses(chrome). выбираешь нужный js файл и ставишь точки останова. и можешь смотреть значения переменных я просто когда тоже начинал, делал как ты. потом понял все прелести отладчика |
skrudjmakdak, а что на счет вопросов повыше?
Я тут пробое всякое, но, пока, не получается. |
<html>
<head>
</head>
<body>
<div>
<div>????? ?? ?????? 1</div>
<div><input type="button" value="click me" countClick="0" onclick="clk(this);"></div>
</div>
<div>
<div>????? ?? ?????? 2</div>
<div><input type="button" value="click me" countClick="0" onclick="clk(this);"></div>
</div>
<script>
function clk (ths) {
var countClick = ths.getAttribute('countClick');
++countClick;
if (countClick == 2)
ths.parentNode.parentNode.style.display = 'none';
else
ths.setAttribute('countClick', countClick);
}
</script>
</body>
</html>
|
Цитата:
Цитата:
Как вариант...
<!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(N) {
document.getElementById('hdn_'+N).className='';
};
</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(1)' value="Ответить">
</body>
</html>
|
ksa, да я уже нашел ответ, теперь ищу как сделать кое-что дургое...:
Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно. |
а я честно говоря вообще противник вот этого вот (имхо):
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, время: 01:44. |