代码之家  ›  专栏  ›  技术社区  ›  adamwstl

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

  •  0
  • adamwstl  · 技术社区  · 15 年前

    有没有更好、更有效的方法来编写这段代码?这是一个临时的下拉菜单,允许用户对多人进行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()
     });
    
    2 回复  |  直到 15 年前
        1
  •  3
  •   Fábio Batista Raza Ahmed    15 年前
    $('.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>
    
        2
  •  -1
  •   Hannoun Yassir    15 年前

    使用一个循环并存储这个“guest_num_1”,对于每个确定,用循环索引更改“1”