3

次のように、標準化された表示/非表示要素システムを作成しようとしています。

<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 を持つものはすべて表示されます。

4

3 に答える 3

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

http://jsbin.com/ezizu3/edit

于 2010-03-19T01:47:09.887 に答える
0

この種のことは、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();
});
于 2010-03-19T07:20:15.090 に答える
0

これは、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();
});

正規表現で要素のクラスを解析する必要がないため、これはよりクリーンだと思います。トリガー要素に任意の数の他のクラスを追加できますが、トリガーがどの要素をポップアップさせるかは明らかです。

于 2010-03-19T07:40:34.277 に答える