jQuery Comment系统无法正常工作

Question

我正在尝试创建评论系统，该问题未显示评论，如果显示，则投票，用户名和其他项目未显示

投票按钮正常工作

我不是这里的问题吗？

https://codepen.io/MRuhaily/pen/OoNRQp

HTML

jQuery

$(document).ready(function() {

  $('.upvote').on('click', function() {
    $(this).on('click', function() {
      var counter = 0;
      counter = counter + 1;
      $('.votes').html(counter);

    });
  });

  $('.downvote').on('click', function() {
    $(this).on('click', function() {
      var counter = 0;
      counter = counter - 1;
      $('.votes').html(counter);

    });
  });

  $('#addCommentButtton').on('click', function(e) {
    var comment = $('#commentText').val();
    $('<li>').text(comment).prependTo('.Comments');
    $('#commentDiv').val('');

    if (comment.length > 1) {
      $('#addCommentButtton[type="submit"]').removeClass('disabled');
    } else if (comment.length === 0) {
      $('#addCommentButtton[type="submit"]').addClass('disabled');
    }
  });

});

Answer 1

按钮类型为submit，因此默认行为是提交表单。

您必须在回调函数中添加e.preventDefault()：

$('#addCommentButtton').on('click',function(e){
   e.preventDefault();
   // rest of the code
})

这样，将不会提交表单，也不会重新加载页面。此外，文本区域的ID为commentDiv，而不是commentText，因此必须为：

var comment = $('#commentDiv').val();

表决也中断了，但是正如您所说的那样，它可以按您的意愿工作，并且您的问题与评论有关，我不会针对该问题。注释中还提到了您在投票中做错了什么。