Question

im trying to turn this jquery script into a toggle event type, thier is my script, with illustrations, to show what i want to happen. i cnt seem to intrgate it so here goes:

//myElement.toggle(vote(), unvote()); // this is the toggle event

    $(document).ready(function() {
            $('.statuses').delegate('.vote_up', 'click', function(e) {

                //stop event
                e.preventDefault();
               //get the id
                var the_id = $(this).closest('.message').attr('id').split('_').pop();

//function vote () // this should be the vote up function
                //the main ajax request
                $.ajax({
                    context: this,
                    type: "POST",
                      // Make sure "this" in the callback refers to the element clicked

                    data: "action=vote_up&id=" + the_id,
                    url: "ajax/votes.php",
                    success: function (msg) {

                        $(this).siblings("span.vote_count").html(msg).fadeIn();
                          // get the child <img> and set its src
                        $(this).children("img").attr("src", "img/uparrowActive.png");
                    }
                });

//function unvote() thier should be another function here to unvote toggle

$.ajax({
                    context: this,
                    type: "POST",
                      // Make sure "this" in the callback refers to the element clicked

                    data: "action=vote_down&id=" + the_id,
                    url: "ajax/votes.php",
                    success: function (msg) {

                        $(this).siblings("span.vote_count").html(msg).fadeIn();
                          // get the child <img> and set its src
                        $(this).children("img").attr("src", "img/uparrow.png");
                    }
                });
            });

i just dont know how to integrate this toggle event into this jquery snippet, someone please help me ive been trying for years :)) thanks

Answer 1

$('.statuses').delegate('.vote_up, .vote_down', 'click', function(e) {
    var parent = $(this).closest('.statuses'),
        vote = (($(this).hasClass("vote_up")) ? "up" : "down");

    if(parent.data("vote") == vote) {
        return true; // If already voted up, do nothing, if already voted down, do nothing...
    }

    if(vote == "down") { // Vote down
        src = "img/uparrow.png";
        action = "vote_down";
    }
    else if(vote == "up") { // Vote up
        src = "img/uparrowActive.png";
        action = "vote_up";
    }

    // Setting current vote (up or down)
    // So next time you toggle, we have the trace of the previous vote (up/down)
    // And authorise only do the opposite
    parent.data("vote", vote);

            $.ajax({
                context: this,
                type: "POST",
                  // Make sure "this" in the callback refers to the element clicked

                data: "action=" + action + "&id=" + the_id,
                url: "ajax/votes.php",
                success: function (msg) {

                    $(this).siblings("span.vote_count").html(msg).fadeIn();
                      // get the child <img> and set its src
                    $(this).children("img").attr("src", src);
                }
            });
});