Question

是否有更好，更有效的方法来编写此代码？这是一个make shift下拉菜单，允许用户为多人进行RSVP。对不起，这有点乱，但我觉得我所做的很清楚。如果没有，我就在我的电脑旁，并且会在需要更多信息的情况下迅速做出回应。

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

Answer 1

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

Answer 2

使用循环并存储此“guest_num_1”，并且对于每次迭代，使用循环索引更改“1”

编写此Jquery代码的更有效方法

2 个答案: