Parsing variables in and out of functions jquery

Question

Hi, i'm sure this is just a simple one, but its got me stumped on a few different projects now.. i have to keep declaring my variables, and i'm sure there is a better way to be doing things.

in the example below, i'm finding at the "#gender" stage "gender" is printing out fine, but "#age" stage "gender" is no longer defined &/or is not being carried through to the other function.

an example:

var gender;
var age;
var children;


$('#gender li:contains(Male)').click(function() {
  gender = "male";
  $('#age').show();
  $('span.jquery_out').text(gender);
});
$('#gender li:contains(Female)').click(function() {
gender = "female";
$('#age').show();
$('span.jquery_out').text(gender);
});

$('#age li:contains(1)').click(function() {
  var age = "1";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(2)').click(function() {
  var age = "2";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(3)').click(function() {
  var age = "3";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(4)').click(function() {
  var age = "4";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});
$('#age li:contains(5)').click(function() {
  var age = "5";
  $('#children').show();
  $('span.jquery_out').text(gender+" -> "+age);
});

Hope someones got an answer, i'm sure its not a tricky one when in the know. Thanks in advanced. Matt

Answer 1

Sounds like what you need to do is normalize where your data is in your html and make your functions so you can find it:

var gender;
var age;
var children;
$('#gender li').click(function() {
    gender = $(this).text(); //or some other selection to find the value
    $('#age').show();
    $('span.jquery_out').text(gender);
});
$('#age li').click(function() {
    age = $(this).text(); //or some other selection to find the value
    $('#children').show();
    $('span.jquery_out').text(gender+" -> "+age);
});

Answer 2

I don't know what your markup looks like but your jQuery can be greatly simplified.

Before I go on it's worth noting that what you have are basically form fields but you're using lists for them instead. This is far from ideal and I would suggest using a listbox (select) or radio buttons instead and then styling them to suit. There are plenty of jQuery plugins for sprucing up these form items such as Fancy Radio Buttons With jQuery (see the demo).

Then:

<div id="gender">
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</div>
<span class="jquery_out"></span>

Rather than using :contains() and multiple selectors it's easier to do:

var gender;
var age;
$("#gender :radio").click(function() {
  gender = $(this).val();
  update();
});

function update() {
  var text = gender || "";
  if (text.length > 0) {
    text += " -> ";
  }
  text += age || "";
  $("span.jquery_out").text(text);
}

The age markup and code is largely the same.

Answer 3

Try this style, removing the need for the variables:

$('#gender li').click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('#age').show();
  $('span.jquery_out').text($(this).text());
});
$('#age li').click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('#children').show();
  $('span.jquery_out').text($("#gender li.selected").text() + " -> " + $(this).text());
}

You're just assigning a CSS class to keep track, if you want to style it to indicate it's selected, can do that as a bonus.

Answer 4

All great answers thankyou, i've sussed it out using a combination of all of them. thanks guys.