php - jQuery voting system - Stack Overflow

admin管理员组

文章数量:1422437

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.

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 es to class manipulation.

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.

Here is the code.

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

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.

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 es to class manipulation.

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.

Here is the code.

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

• php
• javascript
• jquery
• voting-system

Share Improve this question Follow edited Sep 16, 2010 at 4:01 Bot asked Sep 16, 2010 at 0:28 BotBot 11.9k1111 gold badges7777 silver badges133133 bronze badges 4

• 2 So what is the question? – Chris Laplante Commented Sep 16, 2010 at 0:53
• 1 In JavaScript an id has to start with a letter and should only contain letters, numbers, or _ (underscore). – furtive Commented Sep 16, 2010 at 3:00
• @furtive: What are you talking about? Then why does the code work as is? @SimpleCoder: my question is "Is this the best way to do what I am trying to achieve". Is there functions in jQuery that I am not using that I could be using to make this code much more simple and get rid of some of the if statements. – Bot Commented Sep 16, 2010 at 4:00
• that seems pretty streamlined to me. I'm not sure how you'd remove some of the if statements. IMO Jquery is the best to do what you're doing. – willdanceforfun Commented Sep 16, 2010 at 4:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You could do it this way:

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

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.

Yes, jQuery is the best solution for this but I'm not sure if you can optimize your code any more so.

You can use this one: http://www.technabled./2011/02/pulse-lite-reddit-ajax-up-down-voting.html Disclosure: I am the developer.

本文标签： phpjQuery voting systemStack Overflow