Система голосования JQuery

Question

Итак, я создаю систему голосования, в основном систему голосования Thumbs Up и Thumbs Down. Я использую CakePHP и jQuery с MySQL, но хочу убедиться, что внешний интерфейс правильный, и это лучший способ сделать это.

Я хочу, чтобы пользователь мог изменить свой голос, , поэтому использование jQuery - это лучший и самый эффективный способ? Я довольно новичок в jQuery, когда дело доходит до манипулирования классами.

поле идентификатора будет уникальным идентификатором фотографии, за которую будут голосовать пользователи. Это, конечно, всего лишь тест, и он не будет конечным продуктом в производстве. На странице будет несколько фотографий, и пользователь будет голосовать «за» или «против» за каждую из них.

Вот код.

<?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>

Answer 1

Вы можете сделать это следующим образом:

<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, и вам не нужен удвоенный код для добавления текущего класса.Я не уверен, что быстрее, но я думаю, что этот путь позволит улучшить обслуживание кода.

Answer 2

Вы можете использовать это: http://www.technabled.com/2011/02/pulse-lite-reddit-ajax-up-down-voting.html Раскрытие информации: я разработчик.

Answer 3

Да, jQuery - лучшее решение для этого, но я не уверен, что вы можете оптимизировать свой код так.