2010-04-20 8 views
0

Есть ли лучший, более эффективный способ написать этот код? Это меню выпадающего меню, которое позволяет пользователю использовать RSVP для нескольких людей. Извините, это беспорядок, но я думаю, что я делаю ясно. Если нет, я нахожусь у себя на компьютере и буду реагировать быстро, с дополнительной информацией.Более эффективный способ написать этот код JQuery

//There's got to be a better way to do this 
$('#guest_num_1').click(function() { 
$('#num_guests a#quant_guests').html("1") 
$('.guest_name_2, .guest_name_3, .guest_name_4, .guest_name_5, .guest_name_6 ').hide() 
}); 

$('#guest_num_2').click(function() { 
$('#num_guests a#quant_guests').html("2") 
$('.guest_name_2').fadeIn() 
$('.guest_name_3, .guest_name_4, .guest_name_5, .guest_name_6').hide() 
}); 

$('#guest_num_3').click(function() { 
$('#num_guests a#quant_guests').html("3") 
$('.guest_name_2, .guest_name_3').fadeIn() 
$('.guest_name_4, .guest_name_5, .guest_name_6').hide() 
}); 

$('#guest_num_4').click(function() { 
$('#num_guests a#quant_guests').html("4") 
$('.guest_name_2, .guest_name_3, .guest_name_4').fadeIn() 
$('.guest_name_5, .guest_name_6').hide() 
}); 

$('#guest_num_5').click(function() { 
$('#num_guests a#quant_guests').html("5") 
$('.guest_name_2, .guest_name_3, .guest_name_4, .guest_name_5').fadeIn() 
$('.guest_name_6').hide() 
}); 

$('#guest_num_6').click(function() { 
$('#num_guests a#quant_guests').html("6") 
$('.guest_name_2, .guest_name_3, .guest_name_4, .guest_name_5, .guest_name_6').fadeIn() 
}); 
+0

вы слышали о петлях? – mkoryak

+0

Да, я настолько новичок в этом, что это лучшее, что я мог бы собрать вместе. Похоже, у него ТАК много избыточности. – adamwstl

+0

Это зависит от вашего HTML-кода. Я думаю, ваша разметка также может быть улучшена, а затем ваша JS может быть улучшена. –

ответ

3
$('.guest_num').click(function() { 
    var n = $(this).attr('href').split('#')[1]; 
    $('#num_guests a#quant_guests').html(n); 
    var curr = $('.guest_name_' + n); 
    curr.prevAll().fadeIn(); 
    curr.fadeIn(); 
    curr.nextAll().hide(); 
    return false; 
}); 

На HTML стороне:

<a class="guest_num" href="#1">...</a> 
+1

+1 Я был в середине написания в значительной степени этого точного кода. :] –

+0

Похоже, я быстрее набираю;) Это все еще довольно уродливо, хотя ... –

+0

Большое спасибо, ребята! – adamwstl

-1

использовать петлю и хранить этот "guest_num_1" и для каждого eteration изменить '1' с индексом петли

Смежные вопросы