Jquery scope

Question

I've just started learning Jquery but the examples aren't helping me much...

Now whats happening with the following code is that I have 4 forms that I switch between using a link for each. But what I can't figure out is how to get variable "postOptionSelected" in the first function to pass to the other functions to display even more user options. I realize the variable is not is scope but how do I do this?

$(document).ready(function(){

$("#postOptions ul li a").click(function(event){
      var postOptionSelected = $(this).parent("li").attr("class").substr(11);
      $("form#post"+postOptionSelected).css('display', 'block');
      $("form.postForm:not(#post"+postOptionSelected+")").css('display', 'none');
      event.preventDefault();
});

$("form#post"+postOptionSelected+" div#postMore"+postOptionSelected+" a").click(function(event){
   $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'none');
   $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'block');
   $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'block');
   event.preventDefault();
});

$("form#post"+postOptionSelected+" div#postLess"+postOptionSelected+" a").click(function(event){
   $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'none');
   $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'block');
   $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'none');
   event.preventDefault();
});

});

Answer 1

Your problem isn't so much variable scope; it's just that the more/less click handlers are something you always want to be on the anchors in question, not something you add and remove. Unless you really want into get into removing click handlers, which is no fun. Try this version. It requires that relevant classes be available on the DOM elements involved, not just IDs; hopefully you'll see what it implies. I also took the liberty of using jQuery shorthand versions of some of your operations.

$(document).ready(function(){

    $("#postOptions ul li a").click(function(event){
        var sel = $(this).parent("li").attr("class").substr(11);
        $("form#post"+sel).show();
        $("form.postForm:not(#post"+sel+")").hide();
        event.preventDefault();
    });

    $("form.post div.postMore a").click(function(event){
        $(this).hide();
        $(this).siblings('div.postLess').show();
        $(this).siblings('div.postView').show();
        event.preventDefault();
    });

    $("form.post div.postLess a").click(function(event){
        $(this).hide();
        $(this).siblings('div.postMore').show();
        $(this).siblings('div.postView').hide();
        event.preventDefault();
    });

});