jQuery 用简单的代码选择所有具有相同类的内容？

Question

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

所以，我不想为每个 div 编写以下代码:

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

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

Answer 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，我们可以提供最佳选择。