Question

我正在尝试创建标准化的显示/隐藏元素系统，如下所示：

<div class="opener popup_1">Click Me</div>
<div class="popup popup_1">I'm usually hidden</div>

使用opener类单击div应该使用弹出类显示（）div。我不知道我将在任何给定页面上有多少开启/弹出组合，我不知道在任何给定页面上哪个开启器和弹出窗口将被显示，我不知道如何一个给定的开启者应该调用show（）的许多弹出窗口。开启者和弹出窗口都必须能够拥有更多的类，而不仅仅是jQuery使用的类。

我想做的是这样的事情：

$(".opener").click(function() {
  var openerTarget = $(this).attr("class").filter(function() {
    return this.class.match(/^popup_([a-zA-Z0-9-_\+]*) ?$/);
  });
  $(".popup." + openerTarget).show();

这个想法是，当你点击一个开启者时，它会从开启者的类中过滤出“popup_whatever”并将其存储为openerTarget。然后将显示class = popup和openerTarget的任何内容。

Answer 1

$('.opener').click(function() {
  var openerTarget = this.className.match(/\bpopup_\w+\b/);
  $('.popup.' + openerTarget).hide();
});

http://jsbin.com/ezizu3/edit

Answer 2

我倾向于认为这种事情使用ID会更好：

<div id="popup1" class="opener">Click Me</div>
<div class="popup popup1">I'm usually hidden</div>

使用CSS：

div.popup { display: none; }

和JS：

$("div.opener").click(function() {
  $("div." + this.id).toggle();
});

Answer 3

这似乎是使用HTML5自定义数据属性的好例子。

HTML：

<div data-popup-trigger="popup1">Click me!</div>
<div class="popup1">Secret information no one will ever see! Muahaha!</div>

JS：

$('[data-popup-trigger]').click(function() {
  var popupClass = $(this).attr('data-popup-trigger');
  $('.' + popupClass).show();
});

我认为这更清晰，因为你不必用reg ex来解析元素的类。您可以向触发元素添加任意数量的任意其他类，但仍然可以清楚地看出触发器将弹出哪些元素。

具有多个类的jQuery元素：将一个类存储为var

3 个答案: