Refactor Jquery code into function for reuse

Question

Hi there..

Looking for some assistance if possible.

I have created some jquery code that does the job, but i feel is a bit cluncky, and would like to refactor it correctly...

At the moment the code responds to a click by the user, it checks on server if the user is allowed to vote, if so, it processes the vote via ajax, and moves the vote accordingly.

However, it is currently set up to run only when the "vote up" link is clicked, where it adds one to the vote count. What I also want to do is detract 1 from the vote count when the user clicks on the link with class="vote down", but i dont want to repeat the same code all over again, for this.

Wondering if there was anyway to package all the code into a function, and say "add one if vote up is clicked, detract one if vote down is clicked.

Many thanks

<a href="link class="vote up"> Vote Up </a>
<a href="link class="vote down"> Vote Down</a>




     $('body#true .voteUp').click(function(){

  // Get the song meaning
  $thisLink = $(this);
  var idSm = $(this).parents("div:eq(1)").attr("id");
   //Validate that user isnt rating their own song meaning
   $.getJSON('http://localhost:8500/mxRestore/model/mdl_songs.cfc?method=getRateSm&amp;returnFormat=json&amp;queryformat=column', 
   {idSm: idSm}, 
   function(data){
    var bVoteAllowed = data.ROWCOUNT < 1;
    if(bVoteAllowed){
    // User can vote
     $.getJSON('http://localhost:8500/mxRestore/model/mdl_songService.cfc?method=rateSm&amp;returnFormat=json&amp;queryformat=column', 
     {idSm:idSm,action:true})
                                   // Change vote accordingly
     var totalQuantity = 0;
     var quantity = $thisLink.parent().parent().children('.rateValue').text();
     quantity = parseInt(quantity);
     totalQuantity = quantity + 1; 
     $thisLink.parent().parent().children('.rateValue').text(String(totalQuantity)).effect("highlight", {}, 3000);
    }else {

     $thisLink.text("you are not allowed to vote") 
    }

   })
   return false

 })

Answer 1

var vote = function(value) {
    // ...
};

$('body#true .voteUp').click(function() {
    return vote(+1);
});

$('body#true .voteDown').click(function() {
    return vote(-1);
});

Replace ... with the body of the function you've already defined. You can use the value passed to vote() to determine whether it should be voted up or down.

Answer 2

$('.voteUp, .voteDown').click(function(){
   //do your processing, vote checking etc


    if ($(this).hasClass('voteUp')){
    //perform vote up action
    }
    else{
     //perform vote down action
    }
   return false;
});