0

複数の要素を .toggleClass しようとしているいくつかの繰り返し div があり、他の要素を変更せずに正しい要素を指すのに問題があります。

基本的に、同じIDとクラスを持つdivがたくさんあり、クラス「a_expander」のリンクをクリックして、それぞれを展開するように切り替えたいだけです。#result クラスを "a_collapse a_expand" の間で切り替え、#resthumb を "rescellLc rescellLe" の間で切り替えたいと思います。

<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

わかりました、ここにはたくさんのものがあります...

まず
、Emily Peal の曲が好きです :)。

2 つ目:
HTML の再構築を検討することをお勧めします。サンプルの構造とスタイル名は、理解しようとするとかなり混乱します。
再構築を希望する場合は、http: //jsfiddle.net/9PFps/2/に、よりクリーンな方法で同じことを効果的に達成する例をまとめます。
トグルを 1 か所 (アルバム レベルなど) で行うだけで、子ノードがそれを利用してスタイルを調整できるようにする方がクリーンです。例を見てみると、私の言いたいことがわかるでしょう。ところで、完全を期すために、「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;
}

3 番目:
上記の既存の HTML は整形式ではありません。最初の結果に終了 div がありません。これは、使用しているメソッドによっては、jQuery セレクター (およびおそらくレイアウト) で問題を引き起こす可能性があります。

最後に
、既存の構造を本当に使用したい場合は、スタイルをいくつか作成して、クラスを切り替えたいノードに DOM を移動する例をまとめました。ここで見つけることができます：http://jsfiddle.net/KSeLL/

幸運を！

于 2013-09-01T06:40:41.800 に答える
0

以前のポスターが示したように、最初に重複した ID を取り除きます。特定のページで同じ ID を複数回使用することはできません。

次に、.siblings() への呼び出しを .closest() への呼び出しに置き換えます。#result div は、アンカー タグの兄弟ではありません。(jQuery の兄弟とは、2 つ以上の要素が同じ親コンテナーの子であることを意味します。) #result は、リンクの「先祖」です (兄弟でも親でもありません。いわば、曾曾祖父のようなものです)。アンカーから #result に到達するには、DOM の複数のレベルに移動する必要があります。そのためには .closest() を使用してください。

于 2013-08-31T23:34:11.167 に答える