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=팝업 및 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.추가할 수 있습니다 숫자는 임의의 다른 클래스를 유발 요소이며,그것은 여전히 노골적으로 명백하는 요소를 트리거하는 원인이 나타납니다.