Элемент jQuery с несколькими классами: сохранение одного класса в качестве переменной - PullRequest
Новая
       7

Элемент jQuery с несколькими классами: сохранение одного класса в качестве переменной

3 голосов
/ 19 марта 2010

Я пытаюсь создать стандартизированную систему элементов отображения / скрытия, например: 

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

Нажатие на div с классом opener должно показать () div с классом popup. Я не знаю, сколько открывающих / всплывающих комбинаций у меня будет на любой странице, я не знаю, где на какой-либо странице будут открываться и всплывающее окно, и я не знаю, как во многих всплывающих окнах данный открывающий должен вызывать 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_whwhat» из классов открывающего устройства и сохраняет его как openerTarget. Тогда будет показано что-нибудь с class = popup и openerTarget.

Ответы [ 3 ]

2 голосов
/ 19 марта 2010 
$('.opener').click(function() {
  var openerTarget = this.className.match(/\bpopup_\w+\b/);
  $('.popup.' + openerTarget).hide();
}​);​

http://jsbin.com/ezizu3/edit

0 голосов
/ 19 марта 2010

Это хороший вариант для использования пользовательских атрибутов данных 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. Вы можете добавить любое количество произвольных других классов к инициирующему элементу, и все равно будет совершенно очевидно, какие элементы вызовет триггер.

0 голосов
/ 19 марта 2010

Я склонен думать, что подобные вещи лучше работают с использованием идентификаторов: 

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