Блог

Я новичок в программировании и создании однопользовательского приложения для блогов. Сообщение в блоге может содержать комментарии. То, что я пытаюсь сделать, это показывать комментарии только после нажатия на «комментарий» каждого сообщения. Я могу сделать это здесь.

 $(".comment-area-toggle").click(function(){
$(this).next('.comment-area').slideToggle();

     <li style="margin: none !important;"> Likes: {{ entry.likes }} 
        <a href='/likes/{{entry.id}}/{{entry.likes}}'><span class="glyphicon glyphicon-thumbs-up"></span></a>
        <a href='/dislikes/{{entry.id}}/{{entry.likes}}'><span class="glyphicon glyphicon-thumbs-down"></span></a>
      </li>

      <li class="comment-area-toggle" style="cursor: pointer">Comments:</li> 
      <div class="comment-area">
          <form class="comment-box" action="{{ url_for('add_comment')}}" method="post">
            <dl>
              <li>
                <dd><textarea style="width: 80%; vertical-align: bottom;" name="commenttext" placeholder="Add a comment..." rows="1" cols="40"></textarea>
                <button id="comment" class="btn-comment" type="submit">Comment</button>
              </li>
              <dd><input type="hidden" name="commentid" value = {{entry.id}}>
            </dl>
          </form>
      {% for comment in commentonentries %}
        {% if entry.id == comment.comment_id %}
          <li style="color: rgb(70, 70, 70)">{{ comment.commenttext|safe }}</li>
        {% endif %}
      {% endfor %}        
      </div>
  

но не в этом методе.

 $(".comment-area-toggle").click(function(){
$(this).parent().next('.comment-area').slideToggle();

      <li style="margin: none !important;"> Likes: {{ entry.likes }} 
        <a href='/likes/{{entry.id}}/{{entry.likes}}'><span class="glyphicon glyphicon-thumbs-up"></span></a>
        <a href='/dislikes/{{entry.id}}/{{entry.likes}}'><span class="glyphicon glyphicon-thumbs-down"></span></a>
        <li class="comment-area-toggle" style="cursor: pointer">Comments:</li>
      </li>


      <div class="comment-area">
          <form class="comment-box" action="{{ url_for('add_comment')}}" method="post">
            <dl>
              <li>
                <dd><textarea style="width: 80%; vertical-align: bottom;" name="commenttext" placeholder="Add a comment..." rows="1" cols="40"></textarea>
                <button id="comment" class="btn-comment" type="submit">Comment</button>
              </li>
              <dd><input type="hidden" name="commentid" value = {{entry.id}}>
            </dl>
          </form>
      {% for comment in commentonentries %}
        {% if entry.id == comment.comment_id %}
          <li style="color: rgb(70, 70, 70)">{{ comment.commenttext|safe }}</li>
        {% endif %}
      {% endfor %}        
      </div>
  

Я хочу иметь возможность работать со вторым кодом, потому что в первом коде проблема в том, что я должен размещать «комментарии» в строке под лайками.
Я хочу разместить «комментарии» в той же строке, что и лайки (и я пробовал метод bootstrap row-col, и это не очень хорошее решение)
Теперь во втором коде, я думаю, (this).parent().next(‘.comment-area’) должен выбрать раздел комментариев к конкретному сообщению, но это не так.
И класс «comment-area» имеет display: none, чтобы он не отображался при загрузке страницы