Система голосования 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

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

Answer 3

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