1

ここに私のHTML/PHPがあります:

<p>
    <span data-good="<?php echo $row['good']; ?>" data-wasVoted="<?php echo $row['wasVoted']; ?>" data-review="<?php echo $row['review_id']; ?>"  class="upvote">Votes (<span class="good"><?php echo $row['good']; ?></span>)</span>
</p>

これは混乱のように見えます。申し訳ありませんが、これはテスト コードです。

ユーザーには、これは出力で次のように表示されます。

Votes (3) // 3 is just an example number.

これはクリック可能になります。ユーザーにクリックしてもらいたいのですが、すでに投票済みの場合は 3 が 2 になります。投票していない場合は 3 が 4 になります。これはdata-wasVoted属性によって決まります。持っている場合は 1、持っていない場合は 0 です。（ユーザーが賛成票を投じたかどうかを識別できるように、スタイリングが行われます）。

この情報をサーバーに送信し、必要なものを取得する準備が整いました。これは生成された HTML のループ リストであるため、適切な番号を取得する良い方法がわかりません。そのため、一連の動的投票ボタンがあります。

これが私のjQueryです：

var review_id = $(this).data('review');
var was_voted = $(this).data('wasVoted');
var vote_total = $(this).data('good');

var new_text = $('.good');


$.ajax({
        url : "php/reviews_upvote.php",
        type : "POST",
        dataType : "json",
        data : {
            reviewId : review_id
        },
        success : function(data) {

            if (was_voted == 1) {
                vote_total = vote_total - 1;
                new_text.text(vote_total);
            } else {
                vote_total = vote_total + 1;
                new_text.text(vote_total);
            }

        }
    });

最初の問題は明らかに varnew_textです。classそれは、何度も繰り返されることに基づいています。したがって、1 つをクリックすると、扱っている投票数だけでなく、ページ上のすべての投票数が変わります。必要な属性の一意の属性を特定するにはどうすればよいですか?

2番目の問題。ユーザーは 1 つしか投票できないため、was_votedvar が 1 の場合は 0 に、0 の場合は 1 に動的に変更する必要があります。

編集:phpが呼び出さ れた後にレンダリングされる HTML を追加しました。

<span data-good="2" data-wasvoted="1" data-review="2582"  class="upvote">
    Votes (<span class="good">2</span>)
</span>

data-good得票数です。

4

1 に答える 1

2

ロジックがクリック イベント内で処理される場合。

1 番目の問題- これを使用して要素をターゲットにします。

2 番目の問題- 同じコンテキストを使用してデータ属性を変更する

var $this = $(this),
    review_id = $this.data('review'),
    was_voted = $this.data('wasVoted'),
    vote_total = $this.data('good'),

    new_text = $('.good');

$.ajax({
        url : "php/reviews_upvote.php",
        type : "POST",
        dataType : "json",
        data : {
            reviewId : review_id
        },
        success : function(data) {

            if (was_voted == 1) {
                vote_total = vote_total - 1;
                $this.data('wasVoted', 0);
            } else {
                vote_total = vote_total + 1;
                $this.data('wasVoted', 1);
            }
            $this.find('.good').text(vote_total);

        }
    });
于 2013-07-29T18:16:20.780 に答える