Question

我正在尝试在同一个JS代码段中定位两个类。关于JS，我知道0。是否有一种简单的方法可以尝试使用一个JS效果获得两个类？当我使用逗号分隔符时似乎打破了。

trigger-s-overlay＆amp;触发-A-覆盖

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

我的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()仅返回一个元素。它不能返回多个元素。

还有其他相关函数可以返回元素数组，例如getElementsByClassName或getElementsByName。也许他们可以帮助您解决您的需求。但请注意，其中一些可能无法在每个浏览器中运行。

如果您经常与DOM进行交互，JQuery是一个可以帮助您解决此问题的库。它使得与DOM的交互变得非常简单，并且具有很多功能和灵活性。

Answer 2

看起来你有两组相互关联的元素，唯一的区别是触发按钮的s中的a而不是id叠加。

您可以将代码移动到函数中，将函数传递给类型（s或a），并在设置时使用该类型。沿着这些方向的东西（见评论，你必须向右滚动几个）：

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

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

2 个答案: