jquery - 减少重复代码，jQuery

Question

好的，所以现在效果很好，但是我认为它可以更加优化，因为有很多重复的代码。

有人想尝试一下吗？

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

通常有一种方法可以减少重复。

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