Question

我有一些js代码的问题（再次^^）。在一个项目中，我在我的“main.js”中使用js代码调用一种（某种）模式，该代码使用“document.getElementById”来触发模态...

问题，我想在页面周围触发带有多个链接的模态。所以我尝试使用“document.getElementsByClassName”，但这根本不起作用！（当然我在html部分做了所有改变）

感谢您的帮助！

这就是Js代码:(我正在学习js）

(function() {
var triggerBttn = document.getElementById( 'trigger-contact' ),
    overlay = document.querySelector( 'div.contact-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是（部分）：

<div class="contactico"><i id="trigger-contact" class="fa fa-envelope"></i></div>
<div class="contact-overlay">
    <button type="button" class="overlay-close">close</button>
        <div>test</div>
</div>

所以关键是我有多个链接需要触发“联系覆盖”。

当我尝试时，我将第一行更改为:(当然我更改了html）

(function() {
var triggerBttn = document.getElementsByClassName( 'trigger-contact' ),

Answer 1

好的，我明白了!!我通过更改第一行并添加一些代码找到了一种方法：

triggerBttn = document.querySelector('div.trigger-contact'),
triggerBttn2 = document.querySelector('li.trigger-contact'),

并在底部添加：

triggerBttn2.addEventListener( 'click', toggleOverlay );

Js document.getElements解释？

1 个答案: