javascript - Jquery - 大量链接按钮到相关的 div

Question

我创建了一个简单的 jquery 弹出窗口。 在我的整个网站中，我有几个 btn，每个链接到不同的弹出窗口。

我的问题: 有没有一种方法可以将所有按钮链接到相关的弹出窗口，而不必像我在下面开始这样做那样按名称列出每个按钮和 div？ 还是列出所有按钮和 div 而无需为每个按钮和 div 编写点击事件的最短方法？

$(function() {
  $('.Btn1').click(function(e) {e.preventDefault();
  $('.Pop1').fadeIn();});
  $('.Btn2').click(function(e) {e.preventDefault();
  $('.Pop2').fadeIn();});
  var modalBgd = $('.PopBgd')
  $('.PopClose, .PopBgd').click(function(e) {e.preventDefault();
  modalBgd.fadeOut();});
});

Answer 1

您可以像这样在链接的数据元素中提供弹出窗口的 ID/类:

<a href="#" data-popup=".Pop1" class="openpopup">open popup 1</a>
<a href="#" data-popup=".Pop2" class="openpopup">open popup 2</a>

这会将您的 javascript 缩减为:

$('.openpopup').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});