4

私は小さな投票アプリを作るためにajaxを使用しています。+1をクリックしてアイテムに投票すると、次のコードが実行され、投票数に1が追加され、phpは投票ごとに並べ替えられたアイテムのリストを返します。私が欲しいのは、投票されたアイテムが緑色に変わることです。色を変更するコードは、アイテムを並べ替えて取得した後に実行する必要があります。

以下は、コードのブロックの1つです。その間のテキストは、その特定の部分が何をしているのかを議論しています。

$(function(){
  $(".plus").live('click', function() {
      var plus = $(this).data('plus');
      var dataString = "plus="+plus;

次のコード行は、クリックされたボタンの親要素をクラスで取得し、.headingその背景色を緑色にアニメーション化して、投票されたことを示します。これは問題なく機能しますが、投票が成功するとアイテムが取得されて再度出力され、投票によって並べ替えられるため、1秒間しか表示されません。

$(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);

        $.ajax({
      type: "POST",
      url: "bin/processButtons.php",
      data: dataString,
      success: function() {

        $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {


            var html = data['html'];
            $('#content')
                .html(data['html'])

私がやりたいのは、コードの行をここに移動して、アイテムが投票されて取得された後に色をアニメーション化することです。$(this)クリックした直後にボタンで行う必要があるため、これは機能しなくなりました。

 $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); 
    });
      }
     });
    return false;
    });
});

ありがとう。

4

2 に答える 2

2

contextにパラメータを渡して$.ajax、コンテキストを手動で設定できます。

$.ajax({ context: this, url: ... }).done(function() {
   // $(this) still yields the clicked button
});

同様に、あなたが奇妙になりたいのであれば、も有効です：

$.ajax({ context: $, url: ... }).done(function() {
    this('#my-button').remove();
});

ただし、そうしないでください。contextパラメータがどのように機能するかを説明するために追加しました。

于 2012-07-19T08:13:22.770 に答える
1

私があなたの質問を正しく理解していると仮定すると、後で使用するために$（this）を保持できるようにしたいですか？

その場合、それを変数に格納できるはずです。

var reference = $(this);

//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    reference.parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
}

それをする必要があります。関数で参照を定義すると、その関数内で定義したAJAX成功関数内で参照にアクセスできるはずです（それが理にかなっている場合）。

もう1つの方法は、以下のコメントで説明したとおりです。PHPを使用して、各回答に特定のIDを割り当て、代わりにそのIDへの参照を保存します...

var reference = $(this).attr("id");
//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    $("#" + reference).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
 }
于 2012-07-19T08:15:51.680 に答える