Question

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

virtualenv

所以我的问题在这里。

$('.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);
            }
        },

    });
});
});

因此，每当我单击“赞”按钮时，它都会显示状态200。但是我不想一直增加跨度的值。确实有效。我的意思是确实会增加。但是我不希望它继续增加。我希望它仅增加一次并停止。我只想增加一次。现在，它一直在继续。我该如何使用JQuery。

我知道有一个JQuery var newValue = parseInt($(".clikebadge"+commentLike).text(), 10) + 1; $(".clikebadge"+commentLike).text(newValue);，但是我不知道如何在这种情况下使用它。

Answer 1

您可以通过保存状态来做到这一点。（在data-incremented中的示例中）

一种更好的方法是，如果用户已经放置了类似内容，则通过JSON返回true或false。

$('.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>

跨度增量值仅一次

2 个答案: