jQuery投票系统 [英] jQuery voting system

问题描述

所以我正在制作一个投票系统，基本上是一个Thumbs Up&拇指向下投票系统。我正在使用CakePHP和jQuery与MySQL，但想确保前端是正确的，这是最好的方法。

So I am making a voting system, basically a Thumbs Up & Thumbs Down voting system. I am using CakePHP and jQuery with MySQL but want to make sure the front end is correct and this is the best way to do it.

我希望用户能够要改变他们的投票，所以利用jQuery这是最好和最有效的方法吗？在类操作方面，我对jQuery相当新手。

I want the user to be able to change their vote, so utilizing jQuery is this the best and most efficient way? I'm fairly novice with jQuery when it comes to class manipulation.

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

the ID field is going to be the unique id of the photo the users will be voting on. This of course is just a test and this is not going to be the final product in production. There will be multiple photos on the page and the user votes Up or Down for each of them.

这是代码。

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

It removes the need for extra html id's and you dont need the doubled up code to add the current class. I'm not sure which is quicker, but I think this way will allow better code maintenance.

这篇关于jQuery投票系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！