0

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

基本上我有一堆具有相同 id 和类的 div，我只想通过单击类“a_expander”的链接来切换每个以展开。我希望在“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。希望这不会令人困惑，有人可以提供帮助。非常感谢提前。

4

2 回答 2

0

首先摆脱之前的海报所示的重复 ID。您不能在给定页面上多次使用同一个 ID。

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

于 2013-08-31T23:34:11.167 回答
0

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

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

第二：
我建议您考虑重构您的 HTML —— 示例结构和样式名称在试图弄清楚时非常混乱。如果您愿意进行重组，我将在此处以更简洁的方式有效地完成相同的示例：http:
//jsfiddle.net/9PFps/2/。
只在一个地方进行切换（例如在专辑级别）并让子节点利用它来调整他们的样式会更干净。看看这个例子，你就会明白我的意思。顺便说一句，为了完整起见，我还在示例中添加了“Bang Bang”和一些封面图片。:)
这里的片段：

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 选择器（可能还有您的布局）出现问题，具体取决于您使用的方法。

最后：
如果你真的想使用现有的结构，我整理了一个将 DOM 移动到你想要切换其类的节点的示例，其中包含一些组合样式。你可以在这里找到它：http: //jsfiddle.net/KSeLL/

祝你好运！

于 2013-09-01T06:40:41.800 回答