Question

如果在没有ajax但没有成功使用的情况下使用，我的代码正在更新HTML。

我的HTML代码

<button class="label label-primary likedream" dreamid="12">Like <span class="likecounter">0</span></button>

这是我的jQuery代码文件： -

jQuery(".likepost").click(function(){

    var likecounter = parseInt(jQuery(this).find(".likecounter").html());

    //jQuery(this).html('Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>');

    var dreampostId = jQuery(this).attr("dreamid");
     jQuery.post({url: "/hellotest", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){
         var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>';
         jQuery(this).html(updatedres);

         jQuery(this).removeClass("likepost");

         }
     });

});

如果我在代码中取消注释我的注释行，那么它会更新我的html代码，但不知道为什么相同的代码不能在ajax成功。请帮忙。

谢谢！

Answer 1

问题是你在另一个函数中，然后替换this变量。您需要将其保存在另一个变量中，以便它不会在函数中被覆盖。

jQuery(".likepost").click(function(){

    var likecounter = parseInt(jQuery(this).find(".likecounter").html());

    //jQuery(this).html('Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>');
    var that = this;
    var dreampostId = jQuery(this).attr("dreamid");
     jQuery.post({url: "/hellotest", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){
         var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>';
         jQuery(that).html(updatedres);

         jQuery(that).removeClass("likepost");

         }
     });

});

另外，您可以使用不覆盖此变量的箭头函数。

Answer 2

在你的成功中，回调this实际上是jqXhr对象，而不是被点击的元素。在函数中（最里面的函数）this取决于函数的调用或创建方式以及其他内容。
有成功回调this的方法可以参考点击的项目

将上下文参数设置为项目（jQuery.ajax）

 jQuery.post({url: "/hellotest", context: this, data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){
     var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>';
     jQuery(this).html(updatedres);

     jQuery(this).removeClass("likepost");

     }
 });

使用箭头功能（es6）

 jQuery.post({url: "/hellotest", context: this, data: { "dreamId" : dreampostId, "action" : "like"}, success: result => {
     var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>';
     jQuery(this).html(updatedres);

     jQuery(this).removeClass("likepost");

     }
 });

Answer 3

Okk这就是我如何通过委托来解决这个问题。

jQuery('.dreamaction').on('click', '.likedream', function() {

    var that = this;
    jQuery(that).removeClass("likedream");

    var likecounter = parseInt(jQuery(that).find(".likecounter").html());

    var dreampostId = jQuery(this).attr("dreamid");

    jQuery.post({url: "/dreamaction", data: { "dreamId" : dreampostId, "action" : "like"}, success: function(result){

        var updatedres = 'Liked '+ '<span class="likecounter">'+(likecounter+1)+'</span>';

        jQuery(that).html(updatedres);          

        }
    });

}）;

我的HTML代码： -

<div class="dreamaction">                   
                    <button class="label label-primary likedream" dreamid="12">Like <span class="likecounter">0</span></button>         </div>

没有ajax但不是ajax成功jQuery的HTML数据更新

3 个答案: