Question

我试图不是通过选择ID而是选择一个类，因为我的菜单很少。 id的工作代码如下：

new SVGDDMenu( document.getElementById( 'menu' ) );

我试过了：

new SVGDDMenu( $(".menus"));

和

new SVGDDMenu(".menus");

也试过

new SVGDDMenu( document.getElementsByClassName('CLASS NAME'));

这是使用ID的完整代码：

        (function() {

            function SVGDDMenu( el, options ) {
                this.el = el;
                this.init();
            }

            SVGDDMenu.prototype.init = function() {
                this.shapeEl = this.el.querySelector( 'div.morph-shape' );

                var s = Snap( this.shapeEl.querySelector( 'svg' ) );
                this.pathEl = s.select( 'path' );
                this.paths = {
                    reset : this.pathEl.attr( 'd' ),
                    open : this.shapeEl.getAttribute( 'data-morph-open' )
                };

                this.isOpen = false;

                this.initEvents();
            };

            SVGDDMenu.prototype.initEvents = function() {
                this.el.addEventListener( 'click', this.toggle.bind(this) );

                // For Demo purposes only
                [].slice.call( this.el.querySelectorAll('a') ).forEach( function(el) {
                    el.onclick = function() { return false; }
                } );
            };

            SVGDDMenu.prototype.toggle = function() {
                var self = this;

                if( this.isOpen ) {
                    classie.remove( self.el, 'menu--open' );
                }
                else {
                    classie.add( self.el, 'menu--open' );
                }

                this.pathEl.stop().animate( { 'path' : this.paths.open }, 320, mina.easeinout, function() {
                    self.pathEl.stop().animate( { 'path' : self.paths.reset }, 1000, mina.elastic );
                } );

                this.isOpen = !this.isOpen; 
            };

            new SVGDDMenu( document.getElementById( 'menu' ) );

        })();

And the plugIn I am using is here

Answer 1

document.getElementsByClassName('name')返回一个数组。您需要从该数组中进行选择以返回元素。防爆。 document.getElementsByClassName('name')[0]

假设您的类名选择器是正确的，并且您选择了正确的数组索引，并且您没有使用旧版本的IE，那么这应该可行。

按类而不是ID的getElement

1 个答案: