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);
}