使用jQuery更改特定文本

Altering Specific Text with jQuery

本文关键字：文本 jQuery 使用      更新时间：2023-09-26

这是我的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);
            }
        }
    });

第一个问题显然是var new_text。它是基于一个反复重复的class。因此，如果你点击一个，页面上的所有票数都会发生变化，而不仅仅是你正在处理的那个。如何识别我需要的唯一属性？

第二期因为用户只能投票一次——如果是1，我需要动态地将was_voted变量更改为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为投票总数。

如果逻辑是在点击事件中处理的。

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

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

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);
        }
    });
相关文章：