javascript - 具有相同功能的多能ID选择器

Question

我有下面的弹出脚本，我希望能够使用它的多个实例。例如，我可以在一个页面上有 5 个弹出窗口，但不更改 JS。

这个脚本中的一切都工作正常，但我无法接缝让它在多个实例下工作

我希望它做一些事情 link id^=popup_ 那么下划线后面的任何内容都无关紧要，这样你就可以拥有 popup_one、popup_two 等等，而无需编辑 JS 或添加到它

非常感谢任何帮助世界

$.fn.expose = function(options) {/*jshint unused:false*/
	
  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  
  $modal.on("expose:open", function() {
    $modal.addClass("is-visible");
    $('html, body').addClass("fixed_overlay");
    $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
    $modal.removeClass("is-visible");
    $('html, body').removeClass("fixed_overlay");
    $('body').removeAttr("class");
    $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
    e.preventDefault();
    $modal.trigger("expose:open");
  });
  $modal.add( $modal.find(".close") ).on("click", function(e) {
    e.preventDefault();
    // if it isn't the background or close button, bail
    if( e.target !== this )
    {
      return;
     }
  	$modal.trigger("expose:close");
  });
    
  return;
};

$("#Popup_normal").expose();

$(".cancel").on("click", function(e) {
  e.preventDefault();
  $(this).trigger("expose:close");
});

// Modal End

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
  z-index: 2000; }
  .Modal .content {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 90%;
    padding: 20px;
    border-radius: 3px;
    background: #fff;
    -webkit-transform: translate(-50%, -30%) scale(0);
            transform: translate(-50%, -30%) scale(0); }
  @media (min-width: 768px) {
    .Modal .content {
      position: absolute;
      left: 50%;
      top: 30%;
      width: 50%;
      padding: 20px;
      border-radius: 3px;
      background: #fff;
      -webkit-transform: translate(-50%, -30%) scale(0);
              transform: translate(-50%, -30%) scale(0); } }
  .Modal .close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    width: 24px;
    height: 24px;
    padding: 3px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #5e8cbf;
    color: #fff; }
    .Modal .close:before {
      content: '\2715'; }
  .Modal.is-visible {
    visibility: visible;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    -webkit-transition: background .35s;
    transition: background .35s;
    -webkit-transition-delay: .1s;
            transition-delay: .1s; }
    .Modal.is-visible .content {
      -webkit-transform: translate(-50%, -30%) scale(1);
              transform: translate(-50%, -30%) scale(1);
      -webkit-transition: -webkit-transform .35s;
      transition: -webkit-transform .35s;
      transition: transform .35s;
      transition: transform .35s, -webkit-transform .35s; }

.fixed_overlay {
  overflow: hidden;
  height: 100vh;
  left: 0;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#Popup_normal" >Expose Modal</a>

<div id="Popup_normal" class="Modal" >
	<div class="content">
		<h2>Hey look at me being some content</h2>
		<p>We all know content needs a friendly sentence.</p>
		<a href="#" class="cancel">Cancel</a>
		<span class="close"></span>
	</div>
</div>

Answer 1

使用类选择器。对于第一次使用，请在您的插件中返回每个。它将匹配多个元素。

    $.fn.expose = function(options) {
       return this.each(function() {
         var $modal = $(this),
         $id = $(this).attr("id");
         $trigger = $("a[href=#" + $id + "]");
         //...rest of the stuff
       }     
    }

然后在定义div时给一些类名

    <div id="Popup_normal" class="Modal expose_modal" >
      //rest of stuff
    </div>

最后使用类选择器调用

$(".expose_modal").expose();

DEMO HERE