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

Answer 2

$("#stage2select :radio").change(...)和$("#day li").click(...)处理程序仍然如上所示。其余部分可以折叠成以下内容：

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

这是未经测试的，但我很乐观。

（实际上，我不确定$("#day li")处理程序中的“text”变量应该引用什么。）

减少重复的代码，jQuery

2 个答案:

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