Форум

nicknicknick · #1 (**permalink**) 22.01.2013, 19:39

Всем привет.
Есть страница с вопросами-ответами. Существует потребность скрывать (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.

Deff · #2 (**permalink**) 22.01.2013, 19:46

nicknicknick,
Удобнее пользоваться jQuery и скрывать ветку по классу(добавив класс) в ее начале (или нужном посте)
Тем паче, что "Планируется AJAX."
http://jquery-docs.ru/Selectors/class/#class
http://jquery-docs.ru/Attributes/hasClass/#class

(Хотя есть кроссбраузерная библиотека и на JS c поиском по селекторам)

nicknicknick · #3 (**permalink**) 22.01.2013, 19:52

jQuery использовать в ближайшем будущем не планируется.
Есть рабочая реализацию функции getElementsByClass(), с помощью нее отображаются/скрываются ответы всех веток. В данном случае - конкретной.

Если для каждой ветви генерировать свой класс, как быть с css?

рони · #4 (**permalink**) 22.01.2013, 20:09

nicknicknick,

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

nicknicknick · #5 (**permalink**) 22.01.2013, 20:34

рони,
Спасибо, именно так я себе это представляю.
Вопрос, правда, был в другом.

Просто, как я понял можно сделать и так:

<a onclick="show_hide_thread_replies(this)">Скрыть/показать</a>

и потом идти по дереву к родительскому диву, только смущает меня этот метод.

А описанный мной выше кажется каким-то хлипким, ведь кроме как в id нигде информации о номере сообщения не имеем.
Нужен ли скрытый инпут?

рони · #6 (**permalink**) 22.01.2013, 20:50

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

Нужен ли скрытый инпут?

зачем если можно искать по классу

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

Форум

Справочник

Discord чат

Курсы javascript