1

ユーザーのコメントのために、Ajaxで簡単な投票システム（+と-）を作成しました。1ページに50のコメントが投稿されており、「プラス」または「マイナス」ごとに投票できます。このデータは、PHPスクリプトを介してデータベースに送信されます。ただし、ユーザーが投票すると、PHPスクリプトは50回呼び出され、Chromeデベロッパーツールに表示されます。エラーがあります-予想よりも多くの値。これが私のコードです（2つのDIVボタンとスクリプト）。

コードをスクリプト（up_vote.phpまたはdown_vote.php）に変更する方法を教えてください。呼び出されるのは1回だけです。

<script type="text/javascript" src="raitings/jquery.js"></script>
<script type="text/javascript">$(function() {$(".vote").click(function() {

var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if(name=='down')
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/down_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
   { parent.html(html);}
 });
}
else
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/up_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
   { parent.html(html);
  }  });
}
return false;
    });
});
</script>

//php code below;
echo "<div class=\"box1\"><div class=\"up\"><a href=\"#\" class=\"vote\" title=\"+ 1\" alt=\"+ 1\" id=".$row["id"]." name=\"up\">".$up."</a></div>"
."<div class=\"down\"><a href=\"#\" class=\"vote\" title=\"- 1\" alt=\"- 1\"  id=".$row["id"]." name=\"down\">".$down."</a></div></div>\n";
4

4 に答える 4

1

jQuery を使用する場合、イベントがまったく同じであっても、イベントがスタック可能であることを知っておくことが重要です。例えば：

$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });

これら 3 行をそのまま実行すると、3つの異なるイベントが関連付けられます。つまり、voteクラスを持つ要素をクリックすると、3 つのアラートが次々に表示されます。

さらに、ajax を介してロードされるページが<script></script>親ページの同じブロックを運ぶことがよくあります。この場合、コードは不注意で、ajax 呼び出しのたびに何度も処理されます。

あなたが提供したコードでこれがどのように起こっているかを正確に特定することはできませんでしたが、これが最も可能性の高いシナリオのようです: クリック ハンドラー イベントが数回読み込まれ、その結果、1 回のクリックで複数の ajax 呼び出しがトリガーされます。

コメントで述べたように、これが提示されたときの迅速で汚い解決策は次のとおりです。

$(".vote").click(function()

に：

$(".vote").unbind("click").click(function()

unbind関数のおかげで、新しいイベントがアタッチされるたびに、以前にアタッチされたイベントを破棄するように強制されるため、コードが何回処理されても、複数のイベントがアタッチされるのを防ぐことができます。

これは機能しますが、より良い解決策は、もちろん、js コードが複数回読み込まれている場所を特定し、一度だけ読み込まれるようにすることです。

于 2012-10-25T20:00:42.670 に答える
0

$(".vote").each(function () { $(this).click( clickHandler .... などで問題が解決するはずです。

于 2012-10-25T18:16:41.777 に答える
0

あなたのバージョンがどのように機能するかを完全には理解していませんが、次のようにします。

<a href="JavaScript:vote_up(200);"> + </a>
<a href="JavaScript:vote_down(200);"> - </a>

200 はコメントの一意の ID です。次に、vote_up() および vote_down() 関数を JavaScript で定義し、そこに ajax リクエストを追加します。そうすれば、+/- ボタンがクリックされたときにスクリプトを複数回呼び出さないようにする必要があります。

于 2012-10-25T18:18:53.293 に答える
0

ajaxリクエストを送信する前にボタンを無効にすることができます。

// Sample:

$(function() {
    $(".vote").click(function() {

    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);

    parent.fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');

    if(name=='down')
    {   
        $.ajax({
        type: "POST", 
        url: "raitings/down_vote.php", 
        data: dataString, 
        dataType : "html", 
        cache: false, 
        beforeSend: function() {
            parent.attr("disabled", true);
        },
        success: function(html) {
            parent.html(html);
        }
        });
    } else {    
        $.ajax({
        type: "POST", 
        url: "raitings/up_vote.php", 
        data: dataString, 
        dataType : "html", 
        cache: false, 
        beforeSend: function() {
            parent.attr("disabled", true);
        },
        success: function(html) {
            parent.html(html);
        }
        });
    }

    return false;
    });
});
于 2012-10-25T18:18:54.980 に答える