Question

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 advance.
Matt

Answer 1

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.