javascript - jquery 事件(提交时)正在影响我的所有 div，而不是单击按钮的唯一 div？

Question

大家怎么了？看...我的网页有一个评论系统...我已经处理这个小问题整整一周了。我真的需要一些帮助 x_x ...问题是，当用户在我的页面上留下评论时，由于 ajax，该评论会自动显示，没关系...

每个评论都可以投票。这是我的问题...这些包含投票表单的 div 是动态构建的，问题是当我单击任何评论中发送表单的按钮时...结果数据出现在所有评论中!而不是出现在单击提交按钮的特定位置，所以我现在不知道该怎么做，我希望你能帮我一把。这是我的代码

形式:

<label > Vote </label>
<form action="vote.php" method="POST" class="form-vote" id="form-vote">
<button class="icon-thumbs-up" id="icon-thumbs-up"></button>
<input hidden="hidden" type="text" name="num-comment" id="num-comment" value="'.$d['id'].'" >
<input  hidden="hidden" type="text" name="point" id="point" value="'.$d['point'].'" >
<p id="actual-points" class="actual-points"> '.$d['point'].'</p> 
<div id="result"  class="result"> </div>
</form>

脚本:

<script type="text/javascript">
$(document).ready function() {

    $('.form-vote')on('submit', function() {

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {

                                $('.actual-points').hide();
                                $('.result').html(data).fadeIn('slow');
            }
        })
        return false;
    }); 
})  
</script>

Answer 1

您是否尝试过保存原始事件的“this”对象并在 success 函数中使用它，如下所示:

$('.form-vote')on('submit', function(e) {
  e.preventDefault();
  var $form = $(this); // Save here

  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(data) {
      // use here
      $form.find('.actual-points').hide();
      $form.find('.result').html(data).fadeIn('slow');
    }
  })
  return false;
});