Question

我在动态生成的页面上有一个项目列表 - 我可以很容易地获得每个项目的$ itemid。

我正在尝试为每个人设置一个投票，但是我不能让实例与投票链接的实例不同，以免彼此混淆，并且页面正在按照您的预期尝试，发布我投票的所有项目.php页面

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".submitVote a").click(function()
        {
            var ID = <?php echo $itemid;?>;
            var add = 1;
            var votedby = <?php echo $usr_id ;?>;
            var rating = <?php echo $ratings;?> 

            var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
            $("#vote").text(rating+1); 

                $.ajax({
                type: "POST",
                url: "vote.php",
                data: queryString,
                cache: false,
                success: function(html)
                {

                    $(".submitVote").html('<p style="margin:1px;padding:0px;"></p>');
                    $("#greet").html("Thanks for voting!");
                    $("#greet").delay(500).fadeOut(5000);

                }
                });
        });
    });
</script>

    <div id="<?php echo $itemid;?>" style="width:350px;">
        <span class="submitVote" >
            <p style="margin:1px;padding:0px;">
                Submit your <a href="#">vote</a>
            </p>
        </span>
        <div id="voteBox">
            <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
            <span style="color:#fae240;">votes</span>
        </div> 
        <div id="greet" style="padding-left:65px;"></div>
    </div>

Answer 1

好的，在你的HTML中：

<div id="<?php echo $itemid;?>" style="width:350px;">
    <span class="submitVote" >
        <p style="margin:1px;padding:0px;">
            Submit your <a href="#">vote</a>
        </p>
    </span>
    <div id="voteBox">
        <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
        <span style="color:#fae240;">votes</span>
    </div> 
    <div id="greet" style="padding-left:65px;"></div>
</div>

（好吧，你生成HTML的PHP）你已经在某个地方放了一个项目ID。您可以做的是将其添加到<a>，以便在“点击”处理程序中更容易找到：

    Submit your <a href='#' data-item-id='<?php echo $itemid;?>' data-ratings='<?php echo $ratings;?>' data-user-id='<? php echo $usr_id; ?>'>vote</a>

用户ID可能只被隐藏了一次，但为了简单起见，我会这样做。通过这样做，投票所需的一切就在<a>本身。这很有用，因为您的事件处理程序将使用该DOM节点作为this进行调用。因此，您只需要在页面中使用一次JavaScript代码 - 或者更好的是，它可以在您导入的单独文件中。

$(document).ready(function()
{
    $(".submitVote a").click(function()
    {
        var $clicked = $(this);
        var $voteBlock = $clicked.closest('.submitVote');
        var ID = $clicked.data('item-id');
        var add = 1;
        var votedby = $clicked.data('user-id');
        var rating = $clicked.data('ratings'); 

        var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
        $("#vote").text(rating+1); 

            $.ajax({
            type: "POST",
            url: "vote.php",
            data: queryString,
            cache: false,
            success: function(html)
            {

                $voteBlock.html('<p style="margin:1px;padding:0px;"></p>');
                $("#greet").html("Thanks for voting!");
                $("#greet").delay(500).fadeOut(5000);

            }
            });
    });
});

对.data()的调用会从<a>中的这三个“数据 - ”属性中提取值。

编辑 - 我更新了上面的功能，以确保在投票后只有被点击的<a>被删除。我添加了变量“$ voteBlock”，它将是<span>的父<a>。（顺便说一句，将<p>置于<span>内并不是非常正确的HTML，但它可能不会导致严重问题。您可以将<span>替换为<div>但无论如何。）

同一页面上的多个jQuery实例

1 个答案: