[jQuery] Unable to replicate what seems like a simple element via jQuery

[Jim Newfer]

Hello everyone,


After spending quite some time trying to figure this out, I have
resorted to asking for help because after trying what seems like
everything, I have yet to find a solution. So maybe someone could help
me out/point me in the right direction or offer some function names. I
have tried everything in regards to the .css() function, .load() and
removeAttr and attr() function to no avail. Something in my javascript
design process is failing me. Well enough of the introduction, what I
am doing is simple enough, and can be found here, jyte.com  The main
vote buttons on the page is what I am trying to do. My backend works
great via the $.get() function, except that my user can only vote once
because of classes getting changed and not being recognized. I want
the user to be able to continually swich their votes, 100 times if
they wanted. So far my design has been...

-Show normal buttons, onmousehover("show_vote_box()")

div.Vote box (hidden by default, but shown using .show() in the
show_vote_box() function

<div class="vote_for" onmouseover="show_vote_for_color()"
onclick="vote_for()"></div>
                                                         <-- these two
classes are hidden as well from the start because they are
 
contained within the vote box <div>
<div class="vote_against" onmouseover="show_vote_against_color()"
onclick"vote_against()"></div>

</div>



Now it appears that the visual aspects work fine, UNTIL I vote, then
everything gets all screwy. From not letting me vote again, to not
recognizing changed classes.

Here is my code, hope this helps, any pointers, suggestions,
modifications are greatly appreciated.





Query File:


function showVote(){
        $("div.show_votes").hide();
        $("div.making_vote").show();
}

function restoreVote(){
        $("div.making_vote").hide();
        $("div.show_votes").show();
}

function positionFor(){
        $(".make_vote_left").css("background-position", "-240px 0pt");
}

function positionAgainst(){
        $(".make_vote_right").css("background-position", "-240px 0pt");
}

function positionForOff(){
        $("div.make_vote_left").removeAttr("style");
}

function positionAgainstOff(){
        $("div.make_vote_right").removeAttr("style");
}








function voteFor(story_id){
                $.get("/stories/vote/1/"+story_id, function(data){
                $(".making_vote_left").addClass("left_selected");
                $
(".making_vote_left").removeClass("making_vote_left");
alert(data);
});


}


function voteAgainst(story_id) {
                $.get("/stories/vote/2/"+story_id, function(data){
$(".making_vote_right").addClass("right_selected");
                $
(".making_vote_right").removeClass("making_vote_right");


alert(data)
});
}









XHTML:

<div id="story">
<h1 id="title"><?php echo $readstory['Story']['title']; ?></h1>

<p id="body"><?php echo $readstory['Story']['body']; ?> </p>
<p id="related_story"><a href="/stories/submit/<?php echo
$readstory['Story']['id'];?>/<?php echo $readstory['Story']['title'];?
>">Write A Related Story</a></p>





<div class="vote_box">


<div class="show_votes" onmouseover="showVote()" >

<div class="<?php if($already_voted_for) { ?>vote_left_selected <?
php } else { ?> vote_left <?php } ?>">
</div>

<div class="<?php if($already_voted_against) { ?>vote_right_selected <?
php } else { ?>vote_right<?php } ?>">
</div>
</div>



<div class="making_vote" style="display:none"
onmouseout="restoreVote()">


<div class="make_vote_left" onmouseover="positionFor()"
onmouseout="positionForOff()" onclick="voteFor(<?php echo
$readstory['Story']['id']; ?>)">

</div>


<div class="make_vote_right"
onmouseover="positionAgainst()"onmouseout="positionAgainstOff()"
onclick="voteAgainst(<?php echo $readstory['Story']['id']; ?>)">

</div>









</div>





</div>


</div>







Any advice is GREATLY appreciated.

Sincerely,
Jim