0

私のウェブサイトにコメント返信システムを作ろうとしています。私はすべてのphpファイルを作成しましたが、ここで投票数を変更するのに行き詰まっています.

ここに画像の説明を入力

画像のように、一度の投票で内容が完全に変更され、必要に応じてクラスをupvotetoupvotedまたはdownvotetodownvotedまたはに変更できます。

しかし問題は、クラスが変更されると内容も変更されることです。ただし、ページがリロードされるまで、再度投票することはできません。

addClass()このコードの前は、 andを使用してクラスを変更してremoveClass()いました。

それも同じ問題を引き起こしました。

.html

<span class='votes'><span data-id='8' class='comment vote upvote'></span>".$row['downvotes']."</span>

myId はデータ ID です。ご覧のとおり、データを使用して変数 x の html コンテンツを変更しています。

ただし、一度変更すると、再度投票することはできません。

.js(jクエリ)

 $(document).ready(function(){

    $('#notice').hide();
    $("span").click(function(){
        if($(this).hasClass('vote')){
        var myId = $(this).attr('data-id');
        var action = 'a';
        if($(this).hasClass('upvote')){
            action = 'upvote';
        } else if($(this).hasClass('upvoted')){
            action = 'upvoted';
        } else if($(this).hasClass('downvote')){
            action = 'downvote';
        } else if($(this).hasClass('downvoted')){
            action = 'downvoted';
        }
        var url;
        var class1;
        var class2;
        if(action=='upvote'){
            class1 = "upvoted";
            class2 = "downvote";
        }else if(action=='upvoted'){
            class1 = "upvote";
            class2 = "downvote";
        }else if(action=='downvote'){
            class1 = "upvote";
            class2 = "downvoted";
        }else if(action=='downvoted'){
            class1 = "upvote";
            class2 = "downvote";
        }
        var content;
        /* If voted element is video */
            if($(this).hasClass('video')){
                    url = base_url + 'forms/votes/vote_video.php';
                    content = 'video';
            }
        /* If voted element is comment */
            else if($(this).hasClass('comment')){
                    url = base_url + 'forms/votes/vote_comment.php';
                    content = 'comment';
            }
        var x  = $(this).parent();
        if(action=='upvote'){
            content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvoted'></span>";
            content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
        }else if(action=='upvoted'){
            content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
            content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
        }else if(action=='downvote'){
            content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
            content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvoted'></span>";
        }else if(action=='downvoted'){
            content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
            content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
        }

                $.post(url, { myId:myId, action:action }, function(data){
                    if(data=="error"){
                        alert("Error, your vote couldn't be counted.");
                    }
                    else{
                        x.html(content1+data.up+content2+data.down);
                    }

                },"json");      

        }
    });

 });

ここで私を助けてください。votesまたは、スパンのみをロードする方法についてのアドバイス。

4

1 に答える 1

2 
$("span").click(function(){

イベント ハンドラーは、現在spanページ上にあるすべての要素に関連付けられます。クリックするたびに新しい要素を作成します。ハンドラーはアタッチされていません。使用できます

$(document).on('click', 'span.vote', function(...

これにより、新しい要素のクリックも処理されます。

以前に新しい要素を作成したことがなく、それも機能しなかったとおっしゃいました。それを解決するには、前のコードが必要です。

于 2013-07-05T16:02:52.237 に答える