Question

我创建了一个简单的jquery弹出窗口。在我的网站中，我有几个bt，每个都链接到另一个弹出窗口。

我的问题： 有没有办法将所有按钮链接到相关的弹出窗口，而不必按名称列出每个按钮和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

取决于您的链接/按钮/可点击元素的外观。我会做这样的事情：选择所有这些元素，然后将事件处理程序应用于它们，例如

$(".popup").click(...);

你可以使用更复杂的选择器，但想法总是一样的。请记住，元素可以有多个类。

Answer 2

你可以在链接中的数据元素中提供弹出窗口的id / class，如下所示：

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

Jquery - 将按钮链接到关联的div

2 个答案: