1

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

我正在尝试为每个人设置一个投票，但我无法使实例足够不同，以使投票链接的实例不会相互混淆，并且该页面正在尝试发布所有项目到我的 vote.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>
4

1 回答 1

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>. （顺便说一句，将 a<p>放入 a并不是真正正确的 HTML <span>，但它可能不会导致严重的问题。您可以将 a 替换为<span>但<div>无论如何。）

于 2013-02-17T19:29:04.250 回答