Блог

Главная - Вопросы по программированию - Как отобразить / скрыть текстовое поле ответа с помощью Flask и jQuery?

Как отобразить / скрыть текстовое поле ответа с помощью Flask и jQuery?

#javascript #jquery #flask

#javascript #jquery #flask

Вопрос:

Я давно не использовал HTML / Javascript, поэтому я немного запутался в том, как с этим справиться.

Я создаю клон reddit-y с помощью Flask. Я нахожусь на том этапе, когда я могу добавлять дочерние комментарии к любому комментарию, и все отображается красиво, но когда я тестировал с этим, у меня просто было текстовое поле ответа / кнопка отправки, всегда видимая для каждого комментария, я хочу попробовать подражать фактическому поведению reddit, где есть текст, который говорит»ответить» и при нажатии на него появляется текстовое поле.

Вот мой текущий HTML, который показывает текстовое поле / кнопку отправки для каждого комментария. Как я могу использовать jQuery (или даже vanilla JS), чтобы сделать его таким, чтобы он отображался только при нажатии на какой-либо другой текст, который говорит reply , что он будет отображаться?

 <ul>
  {%- for comment in comments recursive %}
    <li>
        {{ comment.commentContent }}

        <form action="{{ url_for('blog.addComment', postId=post['id'], redirectHere=True, parentComment=comment['id'])}}" method="post">
            <textarea name="comment"></textarea>
            <input type="submit">
        </form>

        {%- if comment.children_comments -%}
            <ul>{{ loop(comment.children_comments) }}</ul>
        {%- endif %}
    </li>
  {%- endfor %}
</ul>

Я был пойман между двумя умами. Должен ли я иметь div для каждого комментария, изначально заданный как невидимый, и при нажатии reply на него текстовая область / форма станет видимой? Или было бы лучше подождать, пока кто-нибудь нажмет reply , а затем динамически с помощью jQuery добавить форму в HTML?

Ответ №1:

Лучше всего использовать опцию свертывания boostraps для скрытия и отображения текстового поля комментария. Приведенный ниже код показывает, как это работает

 <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Hide and show comment box</button>
  <div id="demo" class="collapse">
comment box appears here
  </div>
</div>

</body>
</html>

Теперь, чтобы применить его к вашему коду для отображения и скрытия поля комментариев,
Мне нужно использовать ваш идентификатор комментария, чтобы сделать каждое нажатие кнопки с комментарием уникальным.
если вы получили свой идентификатор комментария, {{ comment.commentid }} передайте его в demo id и параметры data-target

итак, с bootsraps и файлом jquery ваш код будет выглядеть так

     <ul>
      {%- for comment in comments recursive %}
        <li>
            {{ comment.commentContent }}

      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo{{ comment.commentid }}">Hide and show comment box</button>
       <div id="demo{{ comment.commentid }}" class="collapse">

            <form action="{{ url_for('blog.addComment', postId=post['id'], redirectHere=True, parentComment=comment['id'])}}" method="post">
                <textarea name="comment"></textarea>
                <input type="submit">
            </form>
    </div>

        {%- if comment.children_comments -%}
            <ul>{{ loop(comment.children_comments) }}</ul>
        {%- endif %}
    </li>
  {%- endfor %}
</ul>

Комментарии:

1. Я попробую это позже, спасибо. Если это сработает, решение за вами.

2. Он также не забудет проголосовать. просто придерживайтесь концепции

3. Рад, что это работает. Теперь вы можете принять это как ответ. также не забудьте также проголосовать. Спасибо

Метки: