عنصر jQuery مع فئات متعددة:تخزين فئة واحدة كملف var

Question

أحاول إنشاء نظام قياسي لإظهار/إخفاء العناصر، كما يلي:

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

يجب أن يؤدي النقر فوق 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

أميل إلى التفكير في أن هذا النوع من الأشياء يعمل بشكل أفضل باستخدام IDS:

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

لغة البرمجة:

<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. يمكنك إضافة أي عدد من الفصول الأخرى التعسفية إلى عنصر التشغيل وسيظل واضحًا بشكل واضح عن العناصر التي سيؤديها الحافز إلى الظهور.