1 
@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="vote" name="vote" onclick="vote(@item.Id);return false;">vote</a> </div>
    </li>
 }

画像のリストを作成するこのコードがあります。ユーザーに[投票]をクリックして、ajax投稿を作成し、JSONリクエストを取得して支払いを済ませたいと考えていdiv slidera_numます。以下はajax呼び出しであり、戻り{"vote":3}ます。

function vote(idx) {

        $("#vote").click(function () {
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                $(".slidera_num").html(result);
            });
        });
    };

ただし、投票をクリックするたびにajax呼び出しが増加し、3回目にクリックすると5回程度呼び出しられます。私が抱えているもう1つの問題は、すべてのdivにクラスがあるため、すべてのdivを.slidera_num同じ番号で更新したくないということです。

どうすればこれを修正できますか？

ありがとう。

4

5 に答える 5

2

クリックイベントを使用して、クリックイベントをボタンにバインドしています。

代わりにこれを行います：

function vote(idx) {

        $.post("/Home/VoteAjax/", { id: idx}, function (result) {
            $(".slidera_num").html(result);
        });
};

クリックイベントをバインドするためにjqueryを使用する必要はありません。

于 2012-05-06T04:27:21.597 に答える
2

HTMLから削除し、JavaScriptコードのどこかで関数onclick="vote(@item.Id);return false;"を呼び出します。vote()

onclick html属性の使用は古風であり、正しくありません（機能していますが）。

于 2012-05-06T04:27:39.613 に答える
2

IDが重複しています#voteが、IDは一意である必要があり、も削除する必要がありonClickます。

function vote(idx) {

        $('div.slidera_button a[name="vote"]').on('click',function (e) {
            e.preventDefault();
            var to = $(this);
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                to.parent().prev('.slidera_button').html(result);
            });
        });
    };
于 2012-05-06T04:27:57.060 に答える
2

他の回答でも重複がカバーされているようです。* $（ "。slidera_num"）。html（result）; *を使用する代わりに、特定の結果のみを更新するには、次を使用します。

$("#vote").click(function () {
    var thisLink = $(this);
    $.post("/Home/VoteAjax/", { id: idx}, function (result) {
        $(thisLink).closest("li").find(".slidera_num").html(result);
    });
});

編集-修正。$ .post内では、これはclick要素を参照していないため、事前に参照を保存する必要があります（thisLink）。そこから、親liまでトラバースしてから、ターゲット「.slidera_num」に戻ります。

于 2012-05-06T04:28:56.837 に答える
2

コードでは、タグのIDをループ内の「投票」として指定しています。したがって、そのループからのすべての要素は同じIDを持ちます。IDは要素に対して一意である必要があります。だから私はあなたのコードをこのように書き直します

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="@item.Id" name="vote" >vote</a> </div>
    </li>
 }

そして、スクリプトは

$(function(){
  $("div.slidera_button a").click(function(e){
  var item=$(this);
  e.preventDefault();
  $.post('@Url.Action("Vote","Ajax")', { id :item.attr("id") } ,function(response){
     item.closest(".slidera_num").html(response);
  });
});

パスをハードコーディングする代わりに、HTML helper methodそのアクションメソッドへのパスを生成するために使用しています。だから私は私のURLにいくつの../を入れるかについて心配する必要はありません。

于 2012-05-06T04:31:06.400 に答える