Question

出于某种原因，当我点击某个图片触发叠加层时，它会起作用，但它不适用于任何其他ID。

代码：

<div id="trigger-overlay">
   <div class="portfolio web" data-cat="web">
    <div id="trigger-overlay" class="portfolio-wrapper">            
        <div class="trans">
          <div class="item-info">
            <i class="fa fa-camera"></i>
            <h3>Bookworm</h3>
            <span>Books</span>
          </div>
        </div>
      </div>
   </div>
</div>

trigger-overlay主要是我正在做的事情。这是一个小提琴 http://jsfiddle.net/NLPrF/

当你点击它的第一个图像时它会起作用，但是在第二个图像上它没有...它有任何想法为什么它不起作用？

感谢

Answer 1

我无法编辑这些脚本，因为你是在外部拉它们但我可以这么说。该脚本使用选择器

引用图像

$("#trigger-overlay").click(function(e)....

然而，HTML DOM规范的工作方式是理论上只能为一个元素分配一个特定的ID（ID应该是唯一的）。

我解决这个问题的方法是使用class属性作为选择器。更改所有div以使其具有＆＃34;触发器覆盖＆＃34;

class="trigger-overlay"

并更改引用ID的javascript中的位并更改

$(".trigger-overlay").click(function(e).....

＆＃34;。＆＃34;选择器不必是唯一的，因此click函数将调用与选择器匹配的任何元素。＆＃34;。＆＃34; selector表示一个类名。

在审核实际的javascript后，我意识到如果我做出更改将是最好的

demo1.js代码的新代码位于

之下

(function() {
    var triggerBttn = document.getElementsByClassName( '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' );
        }
    }
    for (x=0;x<triggerBttn.length;x++) {
        triggerBttn[x].addEventListener( 'click', toggleOverlay );
    }
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

http://jsfiddle.net/a9be3/有一个JSfiddle作为工作演示

多个触发器覆盖

1 个答案: