1

我有一个 jQuery 脚本的问题。我使用这段代码：

<span class="follow" data-id="<?=$m['id']; ?>" ></span>

-

        $('.follow').click(function(){

        $.ajax({
            type: "POST",
            url:"../ajax/settings/follow.php", 
            async: false,
            dataType:'html',
            data: {'id':$(this).attr('data-id')},
            success:function(rs){
               $(this).removeClass("follow"); 
                $(this).addClass("unfollow"); 

            },

            error:function (xhr, ajaxOptions, thrownError){
                alert("ERROR !!!");
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);

            }  
        });   

    });

单击样式图像 TICK 更改为 CROSS 的跨度后，将 attr 类更改为取消关注。单击取消关注类后必须更改为关注，但不起作用。

        $('.unfollow').click(function(){

        $.ajax({
            type: "POST",
            url:"../ajax/settings/follow.php", 
            async: false,
            dataType:'html',
            data: {'id':$(this).attr('data-id')},
            success:function(rs){
               $(this).removeClass("unfollow"); 
                $(this).addClass("follow"); 

            },

            error:function (xhr, ajaxOptions, thrownError){
                alert("ERROR !!!");
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);

            }  
        });   

    });

怎么了？

我为我的英语道歉！

4

5 回答 5

5 
 $('.unfollow').click(function(){

   // you need keep a reference of '.unfollow' here
   // otherwise you can't get it within success()
   // because success() is another scope

   var reference = this; 

   $ajax({
      ...
      success: function() {  
        $(reference ).removeClass("unfollow"); 
        $(reference ).addClass("follow"); 
        ....
      }
   });
  });

并为您的关注做同样的事情：

 $('.follow').click(function(){

   // you need keep a reference of '.unfollow' here
   // otherwise you can't get it within success()
   // because success() is another scope

   var reference = this; 

   $ajax({
      ...
      success: function() {  
        $(reference ).removeClass("follow"); 
        $(reference ).addClass("unfollow"); 
        ....
      }
   });
  });

这里需要注意的一件重要事情是，更改类不是通过单击立即完成的，因为您正在 ajax 成功函数中更改类，这将需要一些时间来更改类。如果您想在单击时立即更改类，请在 ajax 成功函数之外删除那些更改语句。

另一个重要说明

当您更改类时，span它将成为 DOM 的动态元素。假设您有span上课follow和click活动，span.follow您将其更改class为unfollow. 由于.unfollow在页面加载时它不属于 DOM，所以它变成了一个动态元素，普通绑定在这里不起作用。class当您从更改为 时也是unfollow如此follow。

因此，在这两种情况下，您都需要委托事件处理程序（又名实时）事件处理程序，如下所示：

$(document).ready(function() {
    $('#container').on('click', 'span.follow', function() {
        var reference = this;
        alert('follow');
        $(reference).removeClass("follow");
        $(reference).addClass("unfollow");
    }).on('click', 'span.unfollow', function() {
        var reference = this;
        alert('unfollow');
        $(reference).removeClass("unfollow");
        $(reference).addClass("follow");
    });
});

演示

于 2012-06-06T07:10:13.970 回答
0

.click()不是活的手；它仅将事件绑定到执行时与这些类一起存在的元素。尝试使用实时处理程序：

$('body').on('click', '.follow', function() { });
$('body').on('click', '.unfollow', function() { });
于 2012-06-06T07:10:11.793 回答
0

您是否在寻找更多类似的东西？

$("div.follow").click(function () {
    $(this).toggleClass("unfollow").toggleClass("follow");
});

演示：http: //jsfiddle.net/mikecruz/b6ggd/

以下是使用 ajax 的方法： 我使用 test2.php 作为测试，只回显一个随机数以将内部文本更改为随机数。使用红色/蓝色类（将代码更改为您的类名）只是为了更改字体颜色以显示更改（参见小提琴，但不能将 php ajax 调用放在那里）

$(document).ready(function(){
    $("div.red").click(function () {
        var t = this;
        $.ajax({
            type: "POST",
            url: "./test2.php",
            cache: false,
            success: function(text){
                $(t).toggleClass("blue").toggleClass("red");
                $(t).text(text);
            }
        });     
    });
});
于 2012-06-06T07:16:20.163 回答
0

你在找这个吗？

 $('.follow').live('click',function(){
    var t=$(this);
    $.ajax({
        type: "POST",
        url:"../ajax/settings/follow.php", 
        async: false,
        dataType:'html',
        data: {'id':$(this).attr('data-id')},
        success:function(rs){
           t.addClass("unfollow"); 
           t.removeClass("follow"); 


        },

        error:function (xhr, ajaxOptions, thrownError){
            alert("ERROR !!!");
            alert(xhr.status);
            alert(ajaxOptions);
            alert(thrownError);

        }  
    });   

});

    $('.unfollow').live('click',function(){
    var t=$(this);
    $.ajax({
        type: "POST",
        url:"../ajax/settings/follow.php", 
        async: false,
        dataType:'html',
        data: {'id':$(this).attr('data-id')},
        success:function(rs){
          t.addClass("follow"); 
          t.removeClass("unfollow"); 


        },

        error:function (xhr, ajaxOptions, thrownError){
            alert("ERROR !!!");
            alert(xhr.status);
            alert(ajaxOptions);
            alert(thrownError);

        }  
    });   

});
于 2012-06-06T07:23:45.570 回答
0

函数内部的“this”不会指向您的对象，请尝试将其保存在变量中或使用 id 属性尝试

    $('.unfollow').click(function(){
            var _my_obj=$(this);
            $.ajax({
                type: "POST",
                url:"../ajax/settings/follow.php", 
                async: false,
                dataType:'html',
                data: {'id':$(this).attr('data-id')},
                success:function(rs){
                    _my_obj.removeClass("unfollow"); 
                    _my_obj.addClass("follow"); 

                },
...

或者

<span id='myspan' class="follow" data-id="<?=$m['id']; ?>" ></span>

$('myspan').removeClass('unfollow');
$('myspan').addClass('follow');
于 2012-06-06T07:31:38.067 回答