更有效的方式來寫這個jquery代碼

有沒有更好，更有效的方式來編寫這段代碼？這是一個轉換下拉菜單，允許用戶爲多人提供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() 
});

來源

2010-04-20 adamwstl

你聽說過關於循環？ – mkoryak 2010-04-20 21:12:12

是的，我是這樣的初學者，這是我可以放在一起的最好的。看起來它有很多冗餘。 – adamwstl 2010-04-20 21:13:37

這也取決於您的HTML代碼。我認爲，你的標記也可以改進，然後你的JS可以改進。 – 2010-04-20 21:15:26

$('.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>

來源

2010-04-20 21:18:21

+1我正在寫出非常精確的代碼。：] – 2010-04-20 21:19:35

看起來我是一個更快的typer;）它仍然非常醜陋，雖然... – 2010-04-20 21:20:35

非常感謝你們！ – adamwstl 2010-04-20 21:39:08

-1

使用循環和存儲這些「guest_num_1」併爲每eteration改變與循環索引 '1'

來源

2010-04-20 21:18:34

更有效的方式來寫這個jquery代碼

回答

相關問題