4

だから私は投票システム、基本的には親指を立てる投票システムと親指を下げる投票システムを作っています。MySQLでCakePHPとjQueryを使用していますが、フロントエンドが正しいことを確認したいので、これが最善の方法です。

ユーザーが投票を変更できるようにしたいので、jQueryを利用するのが最善で最も効率的な方法ですか？ クラス操作に関しては、jQueryの初心者です。

IDフィールドは、ユーザーが投票する写真の一意のIDになります。もちろん、これは単なるテストであり、本番環境での最終製品にはなりません。ページには複数の写真があり、ユーザーはそれぞれに上または下に投票します。

これがコードです。

<?php
echo $javascript->link('jquery/jquery-1.4.2.min',false);
?>
<script type="text/javascript">
    $(document).ready(function() {
        $('.vote').click(function () {
            if ($(this).hasClass("current")) {
                alert("You have already voted for this option!");

                return;
            }
            var parentId = $(this).parent("div").attr("id");
            if ($(this).hasClass("up")) {
                //Do backend query and checking here
                alert("Voted Up!");
                $(this).toggleClass("current");
                if ($("#" + parentId + "-down").hasClass("current")) {
                    $("#" + parentId + "-down").toggleClass("current");
                }
            }
            else if($(this).hasClass("down")) {
                //Do backend query and checking here
                alert("Voted Down!");
                $(this).toggleClass("current");
                if ($("#" + parentId + "-up").hasClass("current")) {
                    $("#" + parentId + "-up").toggleClass("current");
                }
            }



        });
    });
</script>
<div id="1234">
    <a id="1234-up" class="vote up" >+</a> | <a id="1234-down" class="vote down" >-</a>
</div>
4

3 に答える 3

5

あなたはこのようにそれを行うことができます：

<script type="text/javascript">
    $(document).ready(function() {
        $('.vote').click(function () {
            if ($(this).hasClass("current")) {
                alert("You have already voted for this option!");
            } else {
                var parentId = $(this).parent("div").attr("id");
                var error = false;

                if ($(this).hasClass("up")) {
                    //Do backend query and checking here (SET: error)
                    alert("Voted Up!");
                }
                else if($(this).hasClass("down")) {
                    //Do backend query and checking here (SET: error)
                    alert("Voted Down!");
                }
                //removes all the votes 
                $(this).parent("div").children().removeClass("current");

                if(!error) {
                    $(this).addClass("current");
                } else {
                    alert("There was an error");
                }
            }
            return false;
        });
    });
</script>
<div id="1234">
    <a class="vote up" href="#">+</a> | <a class="vote down" href="#">-</a>
</div>

これにより、余分なhtml IDが不要になり、現在のクラスを追加するためにコードを2倍にする必要がなくなります。どちらが速いかはわかりませんが、この方法でコードのメンテナンスが向上すると思います。

于 2010-09-16T04:26:12.747 に答える
0

はい、jQueryはこれに最適なソリューションですが、コードをこれ以上最適化できるかどうかはわかりません。

于 2010-09-16T04:17:32.393 に答える
0

これを使用できます：http ：//www.technabled.com/2011/02/pulse-lite-reddit-ajax-up-down-voting.html 開示：私は開発者です。

于 2011-02-17T02:37:11.003 に答える