html - 複数の DIV の DIV スワップ

Question

同じテキスト リンクから div コンテンツを交換する

その投稿には、私の質問に答えるために必要なものがほとんど含まれています。2 つの DIV で問題なく動作しますが、かなりの数がある場合はどうなりますか。より多くの変数の宣言行を追加し続けることなく、関数をどのように変更しますか?

Answer 1

jQuery を使用できる場合は、次のようなものを試すことができます: http://jsfiddle.net/k9JC4/6/

HTML:

<a class="que">Question 1</a>
<div class="ans">
    Answer 1
</div>
<a class='que'>Question 2</a>
<div class='ans'>
    Answer 2
</div>
<a class='que'>Question 3</a>
<div class='ans'>
    Answer 3
</div>

CSS:

.ans
{
    display: none;
}

a
{
    display: block;
    color: blue;
}

J:

$(function(){
    $('.que').click(function(ev){
        ev.preventDefault();

        $('.ans').hide();
        $(this).next('.ans').show();
    });
});

これがどのように機能するかというと、クラス .que を持つリンクをクリックすると、jQuery はクラス.ansを持つ次の兄弟要素を見つけます。他のすべての.ansクラス メンバーが非表示になり、見つかった兄弟が表示されます。