2

投票システムのような Stackoverflow を作成しようとしていますが、ちょっとした問題が発生しました。

jQuery onClick イベントが接続された次の HTML があります。

<div id="c_<%=Html.Encode(Model.C.cID) %>" class="votes">
    <img src="../../Content/gfx/Up.png" class="up" alt="" />
    <span class="votecount"><%= Html.Encode(Model.C.VoteCount)%></span>
    <img src="../../Content/gfx/Down.png" class="down" alt="" />
</div>

jQuery onClick は次のようになります。

 $(".up").click(function() {
    var id = $(this).parent().attr("id").split("_");       
    if (id[0] == "c") {
        //C Vote
        //id[1] contains the id number.
        $.post("/Vote/CUp", { id: id[1] }, function(data) {
            $(this).parent().children(".votecount").html(data.voteCount);                
        },
            "json"
        );
    } else {
        //R Vote
        $.post("/Vote/RUp", { id: id[1] }, function(data) {
            $(this).parent().children(".votecount").html(data.voteCount);
        },
            "json"
        );
    };                        
});

私の問題は、投票数を更新しようとすることにあります。JSONオブジェクトで返された値で投票数スパンを更新する方法がわかりません。

JSON オブジェクトがデータを返しています。alert(data) を使用してこれを確認しました。

助けていただければ幸いです。

4

3 に答える 3

2

$.post() コールバックのスコープでは、これにより、以前のクリック イベントを発生させた要素ではなく、XMLHttpRequest オブジェクトへの参照が提供されます。

これは、クリック ハンドラーのスコープ内の変数に割り当てることができ、$.post() のコールバックで引き続き使用できます。このようなもの：

$(".up").click(function() {
  var id = $(this).parent().attr("id").split("_");

  // Due to the awesome magic of closures, this will be available
  //  in the callback.  "el" is a weak name for the variable, you
  //  should rename it.
  var el = this;

  if (id[0] == "c") {
    //C Vote
    //id[1] contains the id number.
    $.post("/Vote/CUp", { id: id[1] }, function(data) {
        // siblings() is an easier way to select that.
        $(el).siblings(".votecount").html(data.voteCount);                
    }, "json");
  } else {
    //R Vote
    $.post("/Vote/RUp", { id: id[1] }, function(data) {
        $(el).siblings(".votecount").html(data.voteCount);
    }, "json");
  };                        
});
于 2010-01-01T21:34:11.770 に答える
0

試す：

$(this).next(".votecount").html(data.voteCount);
于 2009-10-29T13:48:03.813 に答える
0

あなたはいつでも次のようなことを試すことができます：

<div id="c_<%=Html.Encode(Model.C.cID) %>" class="votes">  
    <img src="../../Content/gfx/Up.png" class="up" alt="" />  
    <span class="votecount" id="vc_<%=Html.Encode(Model.C.cID) %>">
        <%= Html.Encode(Model.C.VoteCount)%>
    </span>  
    <img src="../../Content/gfx/Down.png" class="down" alt="" />  
</div>

次のjQueryで：

 $(".up").click(function() {
    var id = $(this).parent().attr("id").split("_");       
    if (id[0] == "c") {
        //C Vote
        //id[1] contains the id number.
        $.post("/Vote/CUp", { id: id[1] }, function(data) {
            $("#vc_"+data.id).html(data.voteCount);                
        },
            "json"
        );
    } else {
        //R Vote
        $.post("/Vote/RUp", { id: id[1] }, function(data) {
            $("#vc_"+data.id).html(data.voteCount);
        },
            "json"
        );
    };                        
});

そして、 json オブジェクトidの $.post() 関数に渡した back を必ず渡してください。data

呼び出し可能な投票カウント div に一意の識別子が追加されていることに注意してください。

于 2010-01-01T21:11:09.663 に答える