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')开发者_JAVA技巧.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);
}
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);
}
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.)
精彩评论