使用简单代码选择所有具有相同类的jQuery元素？

Question

我希望创建一个div，更准确地说是一个“aside”元素，该元素具有id或class，当单击具有相同class的另一个元素时，它将显示... 我知道有标准的class选择器，但我希望有多个具有不同id或class的“aside”元素，并且我希望打开与单击元素具有相同class或id的元素...

因此，我不想为每个单独的div编写此代码：

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

我希望实现像这样的代码。是否有一种方法可以将示例中的someid更改为一些能够检测被点击元素具有的ID并将其用作"aside"选择器的东西？

- Dino Prašo

---

是的，在li上使用一个类，然后在click事件中使用this.id获取id。请记住，ID必须是唯一的，aside不能与li具有相同的id。 - Kevin B

如果你想得到最好的答案，展示你实际的HTML代码。 - jfriend00

请注意，id选择器在整个文档中应该是唯一的。 - kontur

Answer 1

首先，您可能想知道可以使用this来访问被单击的对象。这意味着您可以获取this.id或this.className以获取被单击的对象的ID或类。现在，您对该信息的处理取决于HTML的结构如何，因此我们需要查看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代码，我们可以提供最佳选项。

- jfriend00

---

如果被点击的 li 元素有多个类，则此操作将失败。 - Zoltan Toth

@ZoltanToth - 是的，我在我的回答中提到了这一点。当OP没有透露他们确切的HTML时，不可能提出更具体的建议。 - jfriend00

它起作用了...非常感谢...现在新的问题是...我想要当我打开另一个时，所有其他的侧边栏都关闭。 - Dino Prašo

@user1902011 - 只需添加 $("aside").removeClass("opened"); 以从所有侧边栏中删除该类，然后再打开所需的侧边栏。 - jfriend00

Answer 2

您可以尝试使用：

this.id

this 指向捕获事件的元素。

- malkassem

---

但是，您不能使用相同的id拥有另一个元素，因此您需要提供更多的解决方案才能使其有用。 - jfriend00

this.id回答了这个问题：“有没有一种方法可以将示例中的someid更改为检测所单击元素的ID的内容？”我不确定你在问什么。 - malkassem

...并将其用于嵌套选择器。请读到最后 :) - Zoltan Toth

Answer 3

你有检查过以jQuery开头的选择器吗？

jQuery（'[attribute^="value"]'）

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

这将调用 toggleClass 方法，对于所有 aside 标签，其 id 属性以 foo_ 开头。

正如其他人所提到的，您不能拥有多个相同的 id 标签，但您可以使用以 foo_ 开头的选择器来针对它们进行操作... 如 foo_1、foo_2、foo_3 等等...

- jamis0n

Answer 4

试试这样

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

- BuddhiP

---

这意味着 li 和 aside 有相同的id，这是无效的。 - Kevin B