Преобразовать сценарий для нескольких элементов JQuery

Question

Я использовал этот скрипт раньше, и до тех пор, как мне нужно только один оверлей он работает отлично ... https://gist.github.com/jamesotron/8fa41dd9e9ab2c78e9f0

Теперь мне нужно вызвать его на несколько интерактивных элементов. Каждый должен открыть другой оверлей. Как я могу реорганизовать его, чтобы передать несколько # div-second, # div-third и т. Д., Когда пользователь нажимает # second-overlay, # third-overlay и т. Д.?

спасибо.

var Overlay, onEndTransition, supportsTransitions, transitionEndEventName; 

transitionEndEventName = function() { 
    var transEndEventNames; 
    transEndEventNames = { 
    WebkitTransition: "webkitTransitionEnd", 
    MozTransition: "transitionend", 
    OTransition: "oTransitionEnd", 
    msTransition: "MSTransitionEnd", 
    transition: "transitionend" 
    }; 
    return transEndEventNames[Modernizr.prefixed("transition")]; 
}; 

supportsTransitions = function() { 
    return Modernizr.csstransitions; 
}; 

onEndTransition = function(ev) { 
    if (supportsTransitions()) { 
    if (ev.propertyName !== "visibility") { 
     return; 
    } 
    this.overlay.off(transitionEndEventName(), onEndTransition); 
    } 
    return this.overlay.removeClass('close'); 
}; 

Overlay = (function() { 
    function Overlay(overlay) { 
    var closeButton; 
    this.overlay = overlay; 
    closeButton = this.overlay.find('button.overlay-close'); 
    if (closeButton.length > 0) { 
     closeButton.click((function(_this) { 
     return function(e) { 
      return _this.toggle(e); 
     }; 
     })(this)); 
    } 
    } 

    Overlay.prototype.isOpen = function() { 
    return this.overlay.hasClass('open'); 
    }; 

    Overlay.prototype.close = function() { 
    this.overlay.removeClass('open'); 
    this.overlay.addClass('close'); 
    if (supportsTransitions()) { 
     return this.overlay.on(transitionEndEventName(), (function(_this) { 
     return function() { 
      return onEndTransition.call(_this); 
     }; 
     })(this)); 
    } else { 
     return onEndTransition.call(this); 
    } 
    }; 

    Overlay.prototype.open = function() { 
    return this.overlay.addClass('open'); 
    }; 

    Overlay.prototype.toggle = function(e) { 
    if (this.isOpen()) { 
     return this.close(); 
    } else { 
     return this.open(); 
    } 
    }; 

    return Overlay; 

})(); 

$(document).ready(function() { 
    var overlay; 
    overlay = new Overlay($('div.first')); 
    return $('#first-overlay').click(function(e) { 
    return overlay.toggle(e); 
    }); 
}); 

Answer 1

Вы можете определить несколько обработчиков нескольких элементов для нескольких элементов. Вам просто нужно немного уточнить свой document.ready(), вам ничего не нужно возвращать.

var mappings = { 
    '#first-overlay' : '#div-first', 
    '#second-overlay' : '#div-second', 
    '#third-overlay' : '#div-third' 
}; 

$(document).ready(function() { 

    $.each(mappings, function(key, val) { 
     /* create a new overlay object and use click handler just to toggle */ 
     var Overlay = new Overlay($(value)); 
     $(key).on('click',function(e) { 
     overlay.toggle(e); 
     }); 

    }); 

});