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'/＆gt;

我有另外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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

使用jQuery＆＃39; index()来识别所选元素集中被点击元素的位置。使用该整数来引用JavaScript对象的相关部分。

＆＃13;

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);
    
  });

});

＆＃13;

<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>

＆＃13;

从数据属性中读取值。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何创建动态弹出窗口Jquery

1 个答案: