Question

我在我的一个项目中使用了ajax投票系统。问题是我正在使用带有id的div来显示投票。因此，当有人在任何帖子中点击向上或向下投票时（一页中有很多帖子。这是一个php循环）它总是最终显示在第一个div中。这是我的代码

$(function() {
    $(".vote").click(function() {
        var id = $(this).attr("id");
        var name = $(this).attr("name");
        var dataString = 'id=' + id;
        var parent = $(this);
        if (name == 'up') {
            $(this).fadeIn(200).html;
            $.ajax({
                type: "POST",
                url: "vote_up.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#display-vote").html(html);
                }
            });
        } else {
            $(this).fadeIn(200).html;
            $.ajax({
                type: "POST",
                url: "vote_down.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#display-vote").html(html);
                }
            });
        }
        return false;
    });
});

HTML

<div class="vote-box">

<a href="" class="vote" id="<?php echo $PostId; ?>" name="up"></a>

<div id="display-vote"><?php echo $Votes; ?></div>

<a href="" class="answer-vote down" id="<?php echo $PostId; ?>" name="down"></a>

</div>

无论如何我能在正确的地方展示选票吗？真的适合任何帮助。

Answer 1

当然只是不使用身份证？

HTML：

<div class="vote-box">

   <a href="" class="vote" id="<?php echo $PostId; ?>" name="up"></a>

   <div class="display-vote"><?php echo $Votes; ?></div>

   <a href="" class="answer-vote down" id="<?php echo $PostId; ?>" name="down"></a>

</div>

JavaScript的：

success: function(html) {
    $(this).parent().find('.display-vote').html(html);
}

Answer 2

Id属性应为唯一。如果您有多个具有相同ID的元素，那么在执行此类$('#myNotSoUniqueId')之类的操作时，将始终返回第一个。

作为一种快速解决方案，我建议而不是

<div id="display-vote"><?php echo $Votes; ?></div>

有类似

的内容

<div class="display-vote" data-id="<?php echo $PostId; ?>">
  <?php echo $Votes; ?>
</div>

并在javascript中有这样的内容：

$(".display-vote[data-id='" + postId +"'])

按特定的data-id属性选择元素

Ajax投票系统投票显示

2 个答案: