Question

根据w3标准，不应该有具有相同ID（http://www.w3.org/TR/html401/struct/global.html#h-7.5.2）的div。但是，我正在尝试使用此叠加效果：http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/带有多个按钮。我搜索了网络（和堆栈），发现了很少有关该主题的主题。

使用

触发叠加层

<p><button id="trigger-overlay" type="button">Open Overlay</button></p>

那个js是var triggerBttn = document.getElementById( 'trigger-overlay' )

我的想法是从身份证到班级。所以我可以用

调用叠加层

<p><button class="trigger-overlay-1" type="button">Open Overlay</button></p>
<p><button class="trigger-overlay-2" type="button">Open Overlay</button></p>
<p><button class="trigger-overlay-3" type="button">Open Overlay</button></p>
...

这是当前的js

(function() {
            var triggerBttn = document.getElementById( 'trigger-overlay' ),
                overlay = document.querySelector( 'div.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 );
        })()

    ;

我试图将其更改为var triggerBttn = document.getElementsByClassName( 'trigger-overlay-1, trigger-overlay-2' ),

但获得TypeError: undefined is not an object (evaluating 'triggerBttn.addEventListener')。

Q更新

@davidnortonjr给出的答案就是我坚持的答案。但是，按钮不会触发正确的菜单。第一个按钮有效，但按钮2和3没有触发右div（触发第一个div /菜单）。

<!-- Should open first overlay menu -->
<p><button class="trigger-overlay" type="button">Open Overlay</button></p>
<!-- Should open second overlay menu -->
<p><button class="trigger-overlay" type="button">Open Overlay</button></p>

这是菜单HTML（很遗憾在第一个q中留下它

<!-- FIRST OVERLAY MENU -->
    <div class="overlay overlay-hugeinc">
        <button type="button" class="overlay-close">Close</button>
        <nav>
            <ul>
                <li><a class="menuitem1">Item1</a></li>
                <li><a class="menuitem2">Item2</a></li>
            </ul>
        </nav>
    </div>

    <!-- SECOND OVERLAY MENU -->
    <div class="overlay overlay-hugeinc">
        <button type="button" class="overlay-close">Close</button>
        <nav>
            <ul>
                <li><a class="menuitem1">Menu2</a></li>
                <li><a class="menuitem2">Item1</a></li>
            </ul>
        </nav>
    </div>

Answer 1

多个元素可以具有相同的名称，因此我将为它们分配所有相同的类名。您应该以这种方式创建按钮：

df = pandas.DataFrame({'A': [1,3,5,9], 'B': [2,3,4,7]})
new_rows = {}
for i in range(df.shape[0] - 1):
    new_rows[i] = df.irow(i)+df.irow(i+1)
new_df = pandas.DataFrame(new_rows).transpose()

然后分配triggerButtons（不需要删除元音）：

<p><button class="trigger-overlay" type="button">Open Overlay</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay</button></p>

这是一个数组，所以你可以遍历它：

var triggerButtons = document.getElementsByClassName( 'trigger-overlay' )

Answer 2

您的CSS选择器不匹配任何元素，并返回undefined。

如果我理解正确，您会尝试在每个可触发叠加层的元素上绑定点击处理程序。

您的CSS课程建议您应该使用ID。这样，每个按钮都可以被唯一标识，但它们也可以通过公共类名共享相同的行为或样式：

<button id="trigger-1" class="trigger">...</button>
<button id="trigger-2" class="trigger">...</button>
<button id="trigger-3" class="trigger">...</button>

这样可以更容易地查找和绑定触发器：

[].forEach.call(document.querySelectorAll('button.trigger'), function (trigger) {
  trigger.addEventListener('click', function () {
    //your code here
  });
});

请注意，如果您有很多这些元素，则可能需要调查事件委派。

显示具有相同ID但不同类的div？

2 个答案: