jQuery投票系统

Question

所以我正在制作一个投票系统，基本上是一个竖起大拇指投票系统&。我使用CakePHP和jQuery与MySQL，但要确保前端是正确的，这是做到这一点的最佳方式。

我想让用户能够改变他们的投票，所以利用jQuery是这是最好和最有效的方式吗？当谈到类操作时，我相当习惯jQuery。

ID字段将成为用户将要投票的照片的唯一ID。这当然只是一种测试，这不会是生产中的最终产品。网页上会有多张照片，用户会为每张照片投票选择Up或Down。

这是代码。

<?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 ID的需要和你不需要的成倍上涨代码添加到当前类。我不确定哪个更快，但我认为这样可以更好地维护代码。

Answer 2

是的，jQuery是最好的解决方案，但我不确定你是否可以优化你的代码。

Answer 3

您可以使用这一个：http://www.technabled.com/2011/02/pulse-lite-reddit-ajax-up-down-voting.html 披露：我是开发人员。