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

StackOverflow https://stackoverflow.com/questions/2474465

  •  21-09-2019
  •  | 
  •  

Вопрос

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

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

Нажатие на div с классом opener должно показать() div с классом popup.Я не знаю, сколько комбинаций opener / popup у меня будет на любой данной странице, я не знаю, где на любой данной странице будут отображаться opener и popup, и я не знаю, для скольких всплывающих окон данный opener должен вызывать show() .И открывающее окно, и всплывающее окно должны иметь больше классов, чем просто то, что используется jQuery.

То, что я хотел бы сделать, это что-то вроде этого:

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

Идея заключается в том, что когда вы нажимаете на opener, он отфильтровывает "popup_whatever" из классов opener и сохраняет это как openerTarget.Затем будет показано все, что имеет class=popup и openerTarget.

Это было полезно?

Решение 

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

http://jsbin.com/ezizu3/edit

Другие советы

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top