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

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

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

其思想是，当您单击一个opener时，它会从opener的类中过滤出“popup_where”，并将其存储为openerTarget。然后将显示class=popup和openerTarget的任何内容

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

---

我倾向于认为，使用ID时，这种方式更有效：

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

和JS：

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

---

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

HTML:

---

我认为这更简洁，因为您不必使用reg ex解析元素的类。您可以向触发元素添加任意数量的其他类，并且触发器将导致哪些元素弹出仍然是显而易见的。

+1。为了获得更好的性能，请使用

popup

div的id（而不是类名）作为

opener

类名的一部分<代码>，

ID的问题是它们应该是唯一的。这意味着，举例来说，我不能为一个弹出窗口设置多个打开器。

div.popup { display: none; }

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

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

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