Javascript 重复。切换类问题

我有一些重复的div，我正试图打开。切换class多个元素，在不改变其他元素的情况下指向正确的元素时遇到困难

基本上，我有一堆具有相同ID和类的div，我只想通过单击类“a_expander”的链接来切换每个div以进行扩展。我希望这样可以在“a#u collapse a#u expand”之间切换#result类，也可以在“rescellc rescellLe”之间切换#resthumb 看起来像这样

<div id="result" class="bg_fader scaler a_collapse">
        <div id="resthumb" class="scaler rescellLc">
           <img src="img/fine-fur-coat.png" />
        </div>
            <div class="rescellC">
                <div class="res_content_album-title">
                    <h><a class="a_expander">Fine Fur Coat</a></h>
                    <p>3 Tracks | September 2012</p>
                </div>
</div>
<div id="result" class="bg_fader scaler a_collapse">
        <div id="resthumb" class="scaler rescellLc">
            <img src="img/tunneling.png" />
        </div>
            <div class="rescellC">
                <div class="res_content_album-title">
                    <h><a class="a_expander">Tunneling</a></h>
                    <p>15 Tracks | July 2011</p>
                </div>
            </div>
</div>

---

我正在使用.parent（）访问外部div，但无法更改#resthumb only指向#结果。希望这不会让人感到困惑，有人可以提供帮助。非常感谢您的帮助。

首先消除前面海报中指出的重复ID。您不能在给定页面上多次使用同一ID

---

接下来，将对.sibles（）的调用替换为对.closest（）的调用。#result div不是锚定标记的同级。（jQuery中的同级表示两个或多个元素是同一父容器的子元素。）#result是链接的“祖先”（不是同级，不是父对象。如果愿意，更像是曾祖父）。要从锚定中获得结果，您必须升级到DOM的多个级别。使用.closest（）进行此操作。

好的，这里有很多内容

第一：
我喜欢艾米丽·皮尔的曲调：）

第二：
我建议您考虑重构HTML——在试图找出它时，示例结构和样式名称非常混乱。如果您愿意进行重构，我会在这里使用一个更有效的方法来实现同样的示例：
<强> < /强>。 只需在一个位置进行切换（例如在唱片集级别）并让子节点利用该切换来调整其风格，这会更简洁。看看这个示例，您就会明白我的意思。顺便说一句，为了完整性起见，我还为示例添加了“Bang Bang”和一些封面图像。
以下是片段：

HTML:

CSS:

第三：
上面现有的HTML格式不正确——第一个结果中缺少一个结束div。这将导致jQuery选择器（可能还有布局）出现问题，具体取决于您使用的方法

最后：
如果您真的想使用现有的结构，我将提供一个示例，通过一些组合样式，将DOM遍历到要切换其类的节点。您可以在这里找到它：

---

祝你好运！

将你的css粘贴在这里或摆弄it@RobMdiv没有名称，它们可以有相同的类名。也许这就是你的意思。你不应该对多个div使用相同的id。id在文档中应该是唯一的。id没有css，我只是使用它们来让javascript定位和切换类。我应该int out这就是我要做的：基本上是一个可扩展元素的列表。非常感谢。你放在一起的内容与我要做的非常接近，只是我的Emily专辑封面的缩略图在折叠状态下可以显示为缩略图，我希望它们在我打开div时展开，这就是我尝试切换2个元素的原因。这就是为什么这是我遇到的问题。我可以得到一些类似于你没有问题的东西，但切换2项。而且我的div在我的代码中正确关闭，我只是在复制时在那里输入了一个拼写错误。我还需要显示隐藏的内容，我还没有得到。基本上我还应该添加我需要我的切换触发器呃是专辑的标题，而不是整个部门。很高兴能提供帮助。请注意“最终”中的链接“在我的回答中。这会分别切换两个元素。我已经用一个小的调整对它进行了更新，将相册封面的图像大小调整显示为一个切换，并将其放在这里：jsfiddle.net/KSeLL/4实际上，另一个具有重构HTML的示例也更改了多个显示项，但只需要进行一次“切换”更改，然后在“父项”处利用该更改在我看来，这使得管理和理解变得更加容易。

$('.a_expander').click(function () {
$(this).siblings('#result').toggleClass("a_collapse a_expand");
$(this).siblings('.resthumb').toggleClass("rescellLc rescellLe");
});

<div class="album notSelected">
    <div class="album_title">Fine Fur Coat</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a3596975827_3.jpg" />
        </div>
        <div class="album_info">
            3 Tracks | September 2012
        </div>
    </div>
</div>    

<hr />
<div class="album notSelected" >
    <div class="album_title">Tunneling</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a2007832660_3.jpg" />
        </div>
        <div class="album_info">
            15 Tracks | July 2011
        </div>
    </div>
</div>    

<hr />
<div class="album notSelected">
    <div class="album_title">Bang Bang</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a3825495084_3.jpg" />
        </div>
        <div class="album_info">
            1 Track | January 2012
        </div>
    </div>
</div>    

$(function() {
    $(".album").click(function() {

        if ($(this).hasClass("selected")) {
            //The "selected" album was clicked, just toggle it to "notSelected"
            $(this).toggleClass("notSelected selected");
        }
        else {
            //Set all albums to "notSelected" and just toggle the clicked one to "selected"
            $(".album").removeClass("selected notSelected");
            $(".album").addClass("notSelected");
            $(this).toggleClass("notSelected selected");
        }
    });
});

.album {
    font-size: 15px;
    border-width: 2px;
    border-color: black;
    padding: 10px;
}

.album.notSelected{
    border-style: none;
}

.album.selected {
    border-style: solid;
}

.album_title{
    text-decoration: underline;
}

.album.selected .album_title {
    color: green;
    font-size: 30px;
}

.album.notSelected .album_details {
    display: none;
}

.album_image {
    padding: 10px;
}