jQuery用简单的代码选择所有同一个类？答案

【问题标题】：jQuery select all with the same class with simple code?jQuery用简单的代码选择所有同一个类？
【发布时间】：2012-12-13 19:04:11
【问题描述】：

我想制作一个 div，或者更准确地说，是一个“aside”元素，当单击另一个具有相同类的元素时，它会出现一个 id 或类...我知道有标准类选择器，但我希望有多个具有不同 id 或类的“备用”元素，并且我希望打开与单击的元素具有相同类或 id 的那个元素...

所以，我不想为每个 div 编写这段代码：

    $(window).load(function(){
      $('nav ul li#someid').click(function () {
      $('aside#someid').toggleClass('opened');
      });
    });

我想要这样的代码。有没有办法将示例中的 someid 更改为检测单击元素具有的 id 并将其用作“aside”选择器的东西？

【问题讨论】：

是的，在 li 上使用一个类，然后在点击事件中使用this.id 获取 id。请记住，ID 必须是唯一的，side 不能与 li 具有相同的 id。
如果您想获得最佳答案，请向我们展示您的实际 HTML。
请注意，id 选择器意味着对整个文档来说是唯一的。

标签： jquery class toggle selector

【解决方案1】：

首先，您可能想知道您可以使用this 访问被点击的对象。这意味着您可以获得this.id 或this.className 来获取被点击对象的id 或类。现在，您对这些信息的确切处理取决于您的 HTML 的结构，因此我们需要查看它以提供更多细节。

同一页面中不能有多个具有相同 ID 的对象。您根本无法做到这一点（当您这样做时，选择器将无法正常工作），因此您想要的方案将无法正常工作。您可以改用类并使用相同的类切换其他项目。这适用于一个特定的li。

$(document).ready(function(){
    $('nav ul li.foo').click(function () {
        $('aside.foo').toggleClass('opened');
    });
 });

或者，根据你的 HTML（如果你的 li 标签只有一个类），你可以做一个更通用的版本，像这样：

$(document).ready(function(){
    $('nav ul li').click(function () {
        $('aside.' + this.className).toggleClass('opened');
    });
});

如果您向我们展示您的实际 HTML，我们可以提供最佳选择。

【讨论】：

如果点击的li有多个类，这将失败
@ZoltanToth - 是的，我在回答中提到了这一点。当 OP 没有披露他们的确切 HTML 时，不可能提出更多细节。
它成功了...非常感谢...现在新问题是...我希望所有其他旁白在我打开另一个旁白时关闭
@user1902011 - 只需添加 $("aside").removeClass("opened"); 以在打开所需的类之前从所有类中删除该类。

【解决方案2】：

您可以尝试使用：

this.id

this 指向捕获事件的元素。

【讨论】：

但是，您不能拥有具有相同 id 的另一个元素，因此您必须提供更多解决方案才能使其有用。
"...并将其用于备用选择器" - 读到最后 :)

【解决方案3】：

你检查过jQuery starts with selector吗？

jQuery('[attribute^="value"]')

$('aside[id^="foo_"]').toggleClass('opened');

这将为所有aside 属性以foo_ 开头的标签调用toggleClass

正如其他人所提到的，您不能拥有超过 1 个相同的 id 标签，但您可以将它们全部以foo_ 开头，并使用以选择器开头的...foo_1foo_2@987654329 @等等...

【讨论】：

【解决方案4】：

试试看

  $(function(){
      $('nav ul li.someClass').click(function () {
      $('aside#aside_' + $(this).attr('id')).toggleClass('opened');
      });
    });

【讨论】：

这说明li和aside的id相同，无效，fyi