Поэтому я создаю систему голосования, в основном систему голосования Thumbs Up & Thumbs Down. Я использую CakePHP и jQuery с MySQL, но хочу убедиться, что внешний интерфейс верен, и это лучший способ сделать это.
Я хочу, чтобы пользователь мог изменить свой голос, поэтому использование jQuery – это лучший и самый эффективный способ? Я довольно новичок в jQuery, когда дело доходит до манипуляции с классом.
поле 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> Вы можете сделать это так:
<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-идентификаторах, и вам не нужен двойной код для добавления текущего класса. Я не уверен, что быстрее, но я думаю, что этот способ позволит улучшить обслуживание кода.
Да, jQuery – лучшее решение для этого, но я не уверен, что вы можете больше оптимизировать свой код.
Вы можете использовать это: http://www.technabled.com/2011/02/pulse-lite-reddit-ajax-up-down-voting.html. Раскрытие информации: Я разработчик.