在JS字符串中定位多个类？

Question

I'm trying to target two classes in the same JS snippet. I know 0 about JS. Is there an easy way to try and get at two classes with one JS effect? It seems to break when I use comma delimiters.

trigger-s-overlay & trigger-a-overlay

My JS:

/* Search */
(function() {
  var triggerBttn = document.getElementById( 'trigger-s-overlay' ),
    overlay = document.querySelector( 'div.s-overlay' ),
    closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
      'WebkitTransition': 'webkitTransitionEnd',
      'MozTransition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'msTransition': 'MSTransitionEnd',
      'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

  function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
      classie.remove( overlay, 'open' );
      classie.add( overlay, 'close' );
      var onEndTransitionFn = function( ev ) {
        if( support.transitions ) {
          if( ev.propertyName !== 'visibility' ) return;
          this.removeEventListener( transEndEventName, onEndTransitionFn );
        }
        classie.remove( overlay, 'close' );
      };
      if( support.transitions ) {
        overlay.addEventListener( transEndEventName, onEndTransitionFn );
      }
      else {
        onEndTransitionFn();
      }
    }
    else if( !classie.has( overlay, 'close' ) ) {
      classie.add( overlay, 'open' );
    }
  }

  triggerBttn.addEventListener( 'click', toggleOverlay );
  closeBttn.addEventListener( 'click', toggleOverlay );
})();

My HTML:

<a id="trigger-s-overlay" class="global_btn icon_btn"><span class="icon-search"></span></a>

<div class="s-overlay overlay-scale search_overlay">
   content
</div>

&

<a id="trigger-a-overlay" class="global_btn icon_btn"><span class="icon-search"></span></a>

<div class="a-overlay overlay-scale">
    content
</div>

Answer 1

getElementById() returns one element only. It cannot return multiple elements.

There are other related functions that can return an array of elements, like getElementsByClassName or getElementsByName . Maybe they can help you solving your needs. But note that some of them may not work in every browser.

If you have to interact with the DOM often, JQuery is a library that can help you with this. It makes interacting with the DOM quite easy and has lots of functionality and flexibility.

Answer 2

It looks like you have two sets of elements that relate to one another, and the only difference is s rather than a in the id of the trigger button and the class of the overlay.

You can move your code into a function, pass the function a type ( s or a ), and have it use that type when setting things up. Something along these lines (see comments, you'll have to scroll right for a couple of them):

(function() {
  // Added these:
  setup("s");
  setup("a");

  // Added the function wrapper
  function setup(type) {
      var triggerBttn = document.getElementById( 'trigger-' + type + '-overlay' ), // <== Changed
        overlay = document.querySelector( 'div.' + type + '-overlay' ),            // <== Changed
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
          'WebkitTransition': 'webkitTransitionEnd',
          'MozTransition': 'transitionend',
          'OTransition': 'oTransitionEnd',
          'msTransition': 'MSTransitionEnd',
          'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

      function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
          classie.remove( overlay, 'open' );
          classie.add( overlay, 'close' );
          var onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
              if( ev.propertyName !== 'visibility' ) return;
              this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            classie.remove( overlay, 'close' );
          };
          if( support.transitions ) {
            overlay.addEventListener( transEndEventName, onEndTransitionFn );
          }
          else {
            onEndTransitionFn();
          }
        }
        else if( !classie.has( overlay, 'close' ) ) {
          classie.add( overlay, 'open' );
        }
      }

      triggerBttn.addEventListener( 'click', toggleOverlay );
      closeBttn.addEventListener( 'click', toggleOverlay );
  }
})();