Question

我有一些重复的div，我正在尝试.toggleClass多个元素，并且无法在不改变其他元素的情况下指向正确的元素。

基本上我有一堆具有相同ID和类的div，我只想通过单击带有“a_expander”类的链接来切换每个div。我希望在“a_collapse a_expand之间切换#result类，以及在”rescellLc 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>

我的js到目前为止

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

我使用.parent（）来获取外部div，但无法将#resthumb只指向#result。希望这不是混乱，有人可以提供帮助。非常感谢。

Answer 1

首先删除重复的ID，如前面的海报所示。您不能在给定页面上多次使用相同的ID。

接下来用对.closest（）的调用替换对.siblings（）的调用。 #result div不是锚标签的兄弟。（jQuery中的兄弟姐妹意味着两个或多个元素是同一个父容器的子元素。）#result是链接的“祖先”（不是sibbling，而不是父级。如果你愿意，更像是伟大的曾祖父）。要从锚点到#result，你必须上升多个DOM级别。使用.closest（）。

Answer 2

好的，这里有很多东西......

第一：
我喜欢Emily Peal的曲调:)。

第二：
我建议您考虑重构HTML - 样本结构和样式名称在尝试解决时非常混乱。如果你愿意进行重组，我会在这里整理一个有效地完成同样的例子：
http://jsfiddle.net/9PFps/2/ 。
只在一个地方进行切换（例如在专辑级别）并让子节点利用它来调整他们的风格更干净。看看这个例子，你就会明白我的意思。顺便说一下，我还添加了＆＃34; Bang Bang＆＃34;为了完整起见，我的例子中有一些封面图片。 :)
这里是片段：

HTML：

<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>

JavaScript的：

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

CSS：

.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;
}

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

最后：
如果你真的想要使用那个现有的结构，我把一个例子展示给你想要切换的类的节点，以及一些组成的样式。您可以在此处找到它：http://jsfiddle.net/KSeLL/

祝你好运！

重复的.toggleClass问题

2 个答案: