Question

我的网站上有一个类似的系统;当有人点击“赞”按钮时，我希望动画的数量增加1个。

为此;我使用了Ajax调用，工作正常。一旦Ajax调用过去，我希望它将元素值增加一个：

$(document).ready(function(){
  $('.likebutton').on('click', function() {     
    var a = $(this).attr('name');           
    var b = a.slice(4, 99);                 
    var c = "opim" + b;
    var d = 1;
    $.post('like.php', {i: b}, function(data) {
      $('.likebutton[name=' + a +']').replaceWith( "<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!" );  
      document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML,10) + d;
    });
  });
});

这有效;但有时候，它不会增加1，而是增加2或3个喜欢的数量。

任何人都可以解释为什么会这样做以及如何解决这个问题？

Answer 1

我可能会建议您利用数据属性。

因为我不知道您的HTML代码，所以我建议您使用以下代码，以便不再点击多个代码。

$(function () {
  $('.likebutton').on('click', function (e) {
    // get the AlreadyClicked data attribute
    var aClicked = $(this).data('AlreadyClicked');

    // if yet defined stop
    if (aClicked !== undefined) {
      alert('Already clicked!');
      e.preventDefault();
      return;
    }
    // define it
    $(this).data('AlreadyClicked', true);


    var a = $(this).attr('name');
    var b = a.slice(4, 99);
    var c = "opim" + b;
    var d = 1;
    $.post('like.php', {i: b}, function (data) {
      $('.likebutton[name=' + a + ']').replaceWith("<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!");
      document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML, 10) + d;
    });
  });
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<button class="likebutton" name="name......">I Like</button>

另一个解决方案可以基于one：在第一次单击后，事件处理程序停止。

      $('.likebutton').one('click', function (e) {
            var a = $(this).attr('name');
            var b = a.slice(4, 99);
            var c = "opim" + b;
            var d = 1;
            $.post('like.php', {i: b}, function (data) {
                $('.likebutton[name=' + a + ']').replaceWith("<i name=\"like$i\" class=\"fa fa-heart likebuttono thisi3\" style=\"color:red\"></i></br>Aimé!");
                document.getElementById(c).innerHTML = parseInt(document.getElementById(c).innerHTML, 10) + d;
            });
        });

通过JavaScript增加元素的值

1 个答案: