1

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 に変更しました。クリックした後、フォローを解除するクラスをフォローするように変更する必要がありますが、機能しません。

        $('.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 になります。spanwith classfollowと on clickevent toをtospan.followに変更したclassとしunfollowます。ページの読み込み時に DOM に属して.unfollowいなかったため、動的要素になり、通常のバインドではここでは機能しません。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

関数内の「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 に答える
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 に答える