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

OK、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 はおそらく 1 回だけ隠しておくことができますが、簡単にするためにそのままにしておきます。そうすることで、投票に必要なものがすべてそろっています<a>。イベント ハンドラーがその DOM ノードで呼び出されるため、これは便利ですthis。したがって、ページに JavaScript コードが必要なのは 1 回だけです。

$(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()の 3 つの「data-」属性から値を抽出する呼び出し<a>。

編集— 上記の関数を更新して、<a>クリックされたものだけが投票後にザッピングされるようにしました。の親となる変数「$voteBlock」を追加しまし<span>た<a>。(ちなみに、 a を a の<p>中に入れるのは実際には正しい HTML ではありませんが、おそらく劇的な問題を引き起こすことは<span>ないでしょう。<span><div>

于 2013-02-17T19:29:04.250 に答える