仅增加 Span 的值一次

Question

所以我有一个 ajax 是这样的：

$('.clike').each(function(){
$(this).on("click", function(e) {

    e.preventDefault();

    var commentLike = $(this).data('id');

    $.ajax({
        type: "POST",
        url: "//link",
        dataType: "JSON",
        cache: false,
        statusCode: {
            200: function () {
                console.log('worked! '+commentLike);

                var newValue = parseInt($(".clikebadge"+commentLike).text(), 10) + 1;

                $(".clikebadge"+commentLike).text(newValue);
            }
        },

    });
});
});

所以我的问题是关于这部分的。

var newValue = parseInt($(".clikebadge"+commentLike).text(), 10) + 1;

$(".clikebadge"+commentLike).text(newValue);

所以每次我点击赞按钮时，它都会给出状态 200。但我不想继续增加跨度的值。它确实有效。我的意思是它确实增加了。但我不希望它继续增加。我希望它只增加一次然后停止。我只想增加一次。现在它还在继续。我怎样才能用 JQuery.

做到这一点

我知道有一个 JQuery once.('click') 但我不知道如何在这种情况下使用它。

Answer 1

您可以通过保存状态来完成此操作。（在data-incremented的例子中）

更好的方法是 return true 或 false JSON 如果用户已经放置了类似的内容。

$('.clike').each(function() {
  $(this).on("click", function(e) {

    e.preventDefault();

    var commentLike = $(this).data('id');

    $.ajax({
      type: "GET",
      url: "https://jsonplaceholder.typicode.com/posts/1",
      dataType: "JSON",
      cache: false,
      statusCode: {
        200: function() {
          console.log('worked! ' + commentLike);
          
          var $badge = $(".clikebadge[data-for-id=" + commentLike + "]");
          if ($badge.data('incremented') !== 1) {
            console.log( 'incrementing' );

            var newValue = parseInt($badge.text(), 10) + 1;
            $badge.text(newValue);

            // save increment
            $badge.data('incremented', 1);
          }
        }
      },

    });
  });
});

.clikebadge {
  background-color: #7C7;
  padding: 5px 10px;
  border-radius: 10px;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="clike" data-id="99" value="Click me!" />
<span class="clikebadge" data-for-id="99">1</span>

Answer 2

$('.clike').each(function() {
  $(this).on("click", function(e) {

    e.preventDefault();

    var commentLike = $(this).data('id');

    $.ajax({
      type: "GET",
      url: "https://jsonplaceholder.typicode.com/posts/1",
      dataType: "JSON",
      cache: false,
      statusCode: {
        200: function() {
          console.log('worked! ' + commentLike);
          
          var $badge = $(".clikebadge[data-for-id=" + commentLike + "]");
          if ($badge.data('incremented') !== 1) {
            console.log( 'incrementing' );

            var newValue = parseInt($badge.text(), 10) + 1;
            $badge.text(newValue);

            // save increment
            $badge.data('incremented', 1);
          }
        }
      },

    });
  });
});

.clikebadge {
  background-color: #7C7;
  padding: 5px 10px;
  border-radius: 10px;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="clike" data-id="99" value="Click me!" />
<span class="clikebadge" data-for-id="99">1</span>

仅增加 Span 的值一次

Increment Value of Span only once

jquery

increment