javascript - 如何创建动态弹出Jquery

Question

我找到了这个 Jquery 移动弹出示例:

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../chui/chui-3.9.0.js"></script>

$(function() {      
    ///////////////////
    // Initialize Popup
    ///////////////////
    $("#openPopup").bind("singletap", function() {
      $.UIPopup({
        id: "warning",
        title: 'Attention Viewers!', 
        message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
        cancelButton: 'Skip', 
        continueButton: 'Stay', 
        callback: function() {
          var popupMessageTarget = document.querySelector('#popupMessageTarget');
          popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
          popupMessageTarget.className = "";
          popupMessageTarget.className = "animatePopupMessage";
        }
      });
    });             
});

图像元素:
img src='images/Google-Maps.png' id='openPopup'/>

我还有大约 10 个动态填充的图像元素(id =“openPopup”，id =“openPopup1”，id =“openPopup2”，...等)。图像元素应显示具有不同内容的弹出窗口。如何将函数动态附加到每个元素!!

chui-3.9.0.js 可以在这里找到: https://github.com/sourcebits-robertbiggs/chui/blob/master/dist/chui/chui-3.9.2.js

Answer 1

要将弹出操作绑定(bind)到多个图像，我建议使用单个公共(public)类而不是顺序 ID。

$(function() {
  $(".openPopup").on("click", function() {
    $('#output').text($('#output').text()+'Clicked! ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" />
<img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" />
<img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" />

<div id="output"></div>

要根据单击的元素更改弹出窗口的内容，我建议使用以下方法之一:

1. 引用您之前填充的 JavaScript 对象。

   使用 jQuery 的 index()识别被单击元素在选定元素集中的位置。使用该整数来引用 JavaScript 对象的相关部分。

   var popup_data = {
     '1': {
       'title': 'Title #1',
       'description': 'Description #1'
     },
     '2': {
       'title': 'Title #2',
       'description': 'Description #2'
     },
     '3': {
       'title': 'Title #3',
       'description': 'Description #3'
     }
   };
   
   $(function() {
   
     $(".openPopup").on("click", function() {
       
       var index = jQuery(this).index(),
           this_data = popup_data[index];
       
       $('#output').html(this_data.title + "<br />" + this_data.description);
       
     });
   
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" />
   <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" />
   <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" />
   
   <div id="output"></div>

2. 从数据属性中读取值。

   使用 jQuery 的 data()方法来访问被单击元素的各种数据属性。

   $(function() {
   
     $(".openPopup").on("click", function() {
       
       var $this = jQuery(this),
           title = $this.data('title'),
           description = $this.data('description');
       
       $('#output').html(title + "<br />" + description);
       
     });
   
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" data-title="Title #1" data-description="Description #1" />
   <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" data-title="Title #2" data-description="Description #2" />
   <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" data-title="Title #3" data-description="Description #3" />
   
   <div id="output"></div>

我的演示中没有包含 Chui，但这些概念应该仍然适用。