jQuery - 如何减少重复

Question

我意识到这是一个非常基本的问题，但作为一名设计师和复制粘贴 jQuery-ist，我不确定可能使用的标准方法 - 很明显，由于重复，这可以用更少的废话来完成。有什么好的方法可以做到这一点。有什么建议可以将“皮革”减少到一个衬里吗？谢谢

jQuery(document).ready(function() {

  // Make sure all sections are hidden by default
  // Hide all Choice Sections
  jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
  jQuery('#PHONE-SECTION').hide();
  jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
  jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
  jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();

  // Show the Call Uus section  
  jQuery('.rv_callus_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Call us section   
    jQuery("#PHONE-SECTION").slideDown();
    jQuery('.rv_callus_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PHONE-SECTION").offset().top - 250
    });
  });

  // Hide the Call Us Panel 
  jQuery('.rv_close_button_callus').click(function(e) {
    e.preventDefault();
    jQuery("#PHONE-SECTION").slideUp();
    jQuery('.rv_callus_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the Contact Form section  
  jQuery('.rv_sendusamessage_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Contact Form section
    jQuery("#SECTION-CONTACT-FORM").slideDown();
    jQuery('.rv_sendusamessage_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-CONTACT-FORM").offset().top - 250
    });
  });

  // Hide the CONTACT form      
  jQuery('.rv_close_button_contact').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-CONTACT-FORM").slideUp();
    jQuery('.rv_sendusamessage_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the MAPS section  
  jQuery('.rv_ourlocations_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Maps section    
    jQuery("#SECTION-MAPS").slideDown();
    jQuery('.rv_ourlocations_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-MAPS").offset().top - 250
    });
  });

  // Hide the MAPS section      
  jQuery('.rv_close_button_maps').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-MAPS").slideUp();
    jQuery('.rv_ourlocations_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

  // Show the AGGREGATES QUOTE  section 
  jQuery('.rv_request-aggregates-quotation_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Quote Choice section        
    jQuery("#SECTION-AGGREGATE-QUOTE-FORM").slideDown();
    jQuery('.rv_request-aggregates-quotation_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-AGGREGATE-QUOTE-FORM").offset().top - 250
    });
  });

  // Hide the AGGREGATES QUOTE form     
  jQuery('.rv_close_button_quote').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-AGGREGATE-QUOTE-FORM").slideUp();
    jQuery('.rv_close_button_quote').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });


  // Show the BRICKS QUOTE section  
  jQuery('.rv_request-bricks-quotation_button').click(function(e) {
    e.preventDefault();

    jQuery('#SECTION-MAPS').hide(); // Hide all Choice Sections
    jQuery('#PHONE-SECTION').hide();
    jQuery('#SECTION-CONTACT-FORM').hide(); // Hide all Form Sections
    jQuery('#SECTION-BRICK-QUOTE-FORM').hide();
    jQuery('#SECTION-AGGREGATE-QUOTE-FORM').hide();
    // OPEN the Bricks Quote  section       
    jQuery("#SECTION-BRICK-QUOTE-FORM").slideDown();
    jQuery('.rv_request-bricks-quotation_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#SECTION-BRICK-QUOTE-FORM").offset().top - 250
    });
  });

  // Hide the BRICKS QUOTE form     
  jQuery('.rv_close_brick_button').click(function(e) {
    e.preventDefault();
    jQuery("#SECTION-BRICK-QUOTE-FORM").slideUp();
    jQuery('.rv_close_brick_button').toggleClass('show hide');
    jQuery('html,body').animate({
      scrollTop: jQuery("#PAGE-HEADING").offset().top - 250
    });
  });

});

Answer 1

使用类:

$('.hide-me').hide()

这会隐藏所有具有 hide-me 类的元素。

您也可以在 jquery 选择器中定位多个元素，就像使用 CSS 一样:

$('#section1, #section2, #section3').hide()