Вопрос по аргументам функций, обрабатывающих события
Всем привет.
Есть страница с вопросами-ответами. Существует потребность скрывать (js-ом) ответы (replies) конкретной ветки, находящиеся в отдельном диве. Вижу это так: первоначально на php генерируется html и проставляются аргументы, передаваемые в функцию.
<?
$id = "'replies_113'"; //где 113 - главное сообщение ветки, вопрос.
print "div class='replies' id=".$id;
//...
print "<a onclick='show_hide_thread_replies(".$id.")'">Скрыть/показать</a> ";
//...
?>
В результате получаем html:
<div id="thread_113">
<!-- куча html кода -->
<div class="replies" id="replies_113">
<!-- куча html кода -->
<a onclick="show_hide_thread_replies('replies_113')">Скрыть/показать</a>
</div>
</div>
<div id="thread_116">
<!-- куча html кода -->
<div class="replies" id="replies_116">
<!-- куча html кода -->
<a onclick="show_hide_thread_replies('replies_116')">Скрыть/показать</a>
</div>
</div>
И вызываемая функция:
function show_hide_thread_replies(id){
var el = document.getElementById(id);
el.style.display = (el.style.display == "none") ? "" : "none";
}
Вопрос: правильно ли так делать, где можно конкретно о такой практике почитать, если она имеет место быть? Имеет ли смысл делать скрытый инпут со значением id вопроса, чтобы от него плясать? Какие варианты еще есть? Планируется AJAX. |
nicknicknick,
Удобнее пользоваться jQuery и скрывать ветку по классу(добавив класс) в ее начале (или нужном посте) Тем паче, что "Планируется AJAX." http://jquery-docs.ru/Selectors/class/#class http://jquery-docs.ru/Attributes/hasClass/#class (Хотя есть кроссбраузерная библиотека и на JS c поиском по селекторам) |
jQuery использовать в ближайшем будущем не планируется.
Есть рабочая реализацию функции getElementsByClass(), с помощью нее отображаются/скрываются ответы всех веток. В данном случае - конкретной. Если для каждой ветви генерировать свой класс, как быть с css? |
nicknicknick,
:write:
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.replies {
display: none;
}
</style>
<script type="text/javascript">
function show_hide_thread_replies(id){
var el = document.getElementById(id);
el.style.display = (el.style.display != "block") ? "block" : "none";
}
</script>
</head>
<body>
<div id="thread_113">
<!-- куча html кода -->
<div class="replies" id="replies_113">123
<!-- куча html кода -->
</div>
<a onclick="show_hide_thread_replies('replies_113')">Скрыть/показать</a>
</div>
<div id="thread_116">
<!-- куча html кода -->
<div class="replies" id="replies_116">456
<!-- куча html кода -->
</div>
<a onclick="show_hide_thread_replies('replies_116')">Скрыть/показать</a>
</div>
</body>
</html>
|
рони,
Спасибо, именно так я себе это представляю. Вопрос, правда, был в другом. Просто, как я понял можно сделать и так: <a onclick="show_hide_thread_replies(this)">Скрыть/показать</a> и потом идти по дереву к родительскому диву, только смущает меня этот метод. А описанный мной выше кажется каким-то хлипким, ведь кроме как в id нигде информации о номере сообщения не имеем. Нужен ли скрытый инпут? |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.replies {
display: none;
}
</style>
<script type="text/javascript">
function show_hide_thread_replies(el){
var divs = el.parentNode.getElementsByTagName('div')
for (var i=0; i<divs.length; i++) {
if(divs[i].className == "replies") break
}
divs[i].style.display = (divs[i].style.display != "block") ? "block" : "none";
}
</script>
</head>
<body>
<div id="thread_113">
<!-- куча html кода -->
<div class="replies" id="replies_113">123
<!-- куча html кода -->
</div>
<a onclick="show_hide_thread_replies(this)">Скрыть/показать</a>
</div>
<div id="thread_116">
<!-- куча html кода -->
<div class="replies" id="replies_116">456
<!-- куча html кода -->
</div>
<a onclick="show_hide_thread_replies(this)">Скрыть/показать</a>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:51. |