具有多个类的 jQuery 元素：将一个类存储为 var

发布于 2024-08-26 10:34:16 字数 716 浏览 5 评论 0原文

我正在尝试创建一个标准化的显示/隐藏元素系统，如下所示：

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

单击带有 opener 类的 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();

这个想法是，当您单击 opener 时，它会从 opener 的类中过滤掉“popup_whatever”并将其存储为 openerTarget。然后将显示任何带有 class=popup 和 openerTarget 的内容。

原文

I'm trying to create a standardized show/hide element system, like so:

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

Clicking on the div with the opener class should show() the div with the popup class. I don't know how many opener/popup combinations I'm going to have on any given page, I don't know where on any given page the opener and the popup are going to be displayed, and I don't know how many popups a given opener should call show() for. Both the opener and the popup have to be able to have more classes than just what's used by jQuery.

What I'd like to do is something like this:

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

The idea is that when you click on an opener, it filters out "popup_whatever" from opener's classes and stores that as openerTarget. Then anything with class=popup and openerTarget will be shown.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

季末如歌 2024-09-02 10:34:16

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

http://jsbin.com/ezizu3/edit

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

http://jsbin.com/ezizu3/edit

回复收藏 0 原文

吲‖鸣 2024-09-02 10:34:16

我倾向于认为这种事情使用 IDs:

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

with CSS:

div.popup { display: none; }

和 JS:效果更好

$("div.opener").click(function() {
  $("div." + this.id).toggle();
});

I tend to think this kind of thing works better using IDs:

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

with CSS:

div.popup { display: none; }

and JS:

$("div.opener").click(function() {
  $("div." + this.id).toggle();
});

回复收藏 0 原文

城歌 2024-09-02 10:34:16

这似乎是使用 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 解析元素的类。您可以向触发元素添加任意数量的任意其他类，并且触发器将导致弹出哪些元素仍然是显而易见的。

This seems like a good case to use the HTML5 custom data attributes.

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

I think this is cleaner because you don't have to parse the element's classes with reg ex. You can add any number of arbitrary other classes to the triggering element and it will still be plainly obvious which elements the trigger will cause to pop up.

回复收藏 0 原文

~没有更多了~