treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Seminar Registration Form - some improvement ;)

  • I saw this wonderful thing (Seminar Registration Form) in Demos. Very cool form! But it's code can be improved. Now there is:

    switch ($("#num_attendees option:selected").text()) { case '1': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); break; case '2': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); break; case '3': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); break; case '4': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field"); break; case '5': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field"); $("#attendee_5_wrap").slideDown().find("input").addClass("active_name_field"); break; }

    But if you know how work "switch/break;" it can be written as: switch ($("#num_attendees option:selected").text()) { case '5': $("#attendee_5_wrap").slideDown().find("input").addClass("active_name_field"); case '4': $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field"); case '3': $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); case '2': $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); case '1': $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); break; }

    The result is the same, but code is shorter! :)