Question

这是我的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，如果没有则为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);
            }

        }
    });

第一个问题显然是var new_text。它基于class，一遍又一遍地重复。因此，如果您单击一个，则页面上的所有投票编号都会更改，而不仅仅是您正在处理的投票编号。如何识别我需要的属性？

第二个问题; ，因为用户只能投票一个 - 我需要动态地将was_voted var更改为0（如果为1）或1（如果为0）< / p>

编辑：添加了在调用php后呈现的HTML。

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

data-good是投票总数。

Answer 1

如果在click事件中处理逻辑。

第一个问题 - 使用它来定位元素。

第二个问题 - 使用相同的上下文来更改数据属性

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);

        }
    });

使用jQuery更改特定文本

1 个答案: