Reducing repeated code, jQuery

Question

Ok, so this works perfectly well now however i'm reckoning it could be more optomised as there is a lot of repeated code.

Anyone care to have a go?

var myObj = {
    gender:'',
    age:'',
    children:'',
    income:'',
    stage2select:'',
    day:'',
    spend:'',
    categories:'',
    product:'',
    price:'',
    quantity:'',
    total:''
};


$("#gender li").click(function() {
    myObj.gender = $(this).text();
    $('#age').show();
    update();
});
$("#age li").click(function() {
    myObj.age = $(this).text();
    $('#children').show();
    update();
});
$("#children li").click(function() {
  myObj.children = $(this).text();
    $('#income').show();
  update();
});
$("#income li").click(function() {
  myObj.income = $(this).text();
    $('#stage2select').show();
  update();
});

$("#stage2select :radio").change(function () {
    myObj.stage2select = $(this).val();
    if ( $(this).val() == 'shopping_patterns') {
            $('#day').show();
            $('#block3').hide();
            $('#block2').show();
    }
    if ( $(this).val() == 'specific_products') {
            $('#product').show();
            $('#block2').hide();
            $('#block3').show();
    }
  update();
});

$("#day li").click(function() {
  myObj.day = $(this).text();
    $('#spend').show();
  $("span.jquery_out").text(text);
});
$("#spend li").click(function() {
  myObj.spend = $(this).text();
    $('#categories').show();
  update();
});
$("#categories li").click(function() {
  myObj.categories = $(this).text();
    $('#total').show();
  update();
});
$("#product li").click(function() {
  myObj.product = $(this).text();
    $('#price').show();
  update();
});
$("#price li").click(function() {
  myObj.price = $(this).text();
    $('#quantity').show();
  update();
});
$("#quantity li").click(function() {
  myObj.quantity = $(this).text();
    $('#total').show();
  update();
});



function update() {
    var text = "";
    $.each(myObj, function(i){
        if (this != ''){
            if (text.length){
                text += " -> ";
            }
            text += this;
        }
    });
    $("span.jquery_out").text(text);
} 

Answer 1

There's usually a way to repeat yourself less.

var myObj = {
    gender:'',
    age:'',
    children:'',
    income:'',
    stage2select:'',
    day:'',
    spend:'',
    categories:'',
    product:'',
    price:'',
    quantity:'',
    total:''
};
var dependencies = [ 'gender', 'age', 'children', 'income', 'stage2select',
  'day', 'spend', 'categories', 'product', 'price', 'quantity', 'total'];
var i;
for (i = 1; i < dependencies.length; i++) {
    if (dependencies[i] != 'stage2select') {
        var prev = dependencies[i-1];
        var next = dependencies[i];
        (function(prev, next) {
            $("#" + prev + " li").click(function() {
                myObj[prev] = $(this).text();
                $('#' + next).show();
                update();
            });
        })(prev, next);
    }
}

$("#stage2select :radio").change(function () {
    myObj.stage2select = $(this).val();
    if ( $(this).val() == 'shopping_patterns') {
            $('#day').show();
            $('#block3').hide();
            $('#block2').show();
    }
    if ( $(this).val() == 'specific_products') {
            $('#product').show();
            $('#block2').hide();
            $('#block3').show();
    }
  update();
});

function update() {
    var text = "";
    $.each(myObj, function(i){
        if (this != ''){
            if (text.length){
                text += " -> ";
            }
            text += this;
        }
    });
    $("span.jquery_out").text(text);
} 

Answer 2

The $("#stage2select :radio").change(...) and $("#day li").click(...) handlers remain as above. The rest can be collapsed into the following:

var progression = {
    gender: "#age",
    age: "#children",
    children: "#income",
    income: "#stage2select",
    spend: "#categories",
    categories: "#total",
    product: "#price",
    price: "#quantity",
    quantity: "#total"
};

$.each(progression, function (id, next) {
    $("li", "#" + id).click(function () {
        myObj[id] = $(this).text();
        $(next).show();
        update();
    });
});

This is untested, but I'm optimistic.

(Actually, I'm not sure what the "text" variable in the $("#day li") handler is supposed to refer to.)