javascript - div を使用してページ内の異なるテキストを切り替える

Question

これが私が持っているコードです:

<a class="clickMe">Text 1</a>
<br />
<div class="sri"> - This text will be toggled</div>

<a class="clickMe">Text 2</a>
<br />
<div class="sri"> - This text will be toggled 2</div>

そしてJquery

$(function () {
    $('a.clickMe').click(function () {
        // find first of following DIV siblings
        // with class "textBox" and toggle it
        $(this).nextAll('div.sri:first').toggle();
    });
});

Text1がクリックされたときに「このテキストはトグルされます」と表示し、「このテキストはトグルされます2」を非表示にすることで正常に動作していますが、反対の方法で動作させたい、つまり「このテキストはトグル」を表示し、Text1 をクリックすると「このテキストはトグル 2」と表示されます。これを修正するのを手伝ってください。

Answer 1

これを試して ：

html :

<a class="clickMe a1">Text 1</a>
<br />
<div class="a2"> - This text will be toggled</div>

<a class="clickMe a2">Text 2</a>
<br />
<div class="a1"> - This text will be toggled 2</div>

js:

$(function () {
$('a.clickMe').click(function () {

    var class1 = $(this).attr("class").split(" ")[1];
    $("div." + class1).toggle();
});
});

Answer 2

なぜ追加のクラスが必要なのか、これで質問が解決します

    $('a.clickMe').click(function () {
        // find first of following DIV siblings
        // with class "textBox" and toggle it
$(this).nextAll('div.sri:first').show();        
$('div.sri:visible').not($(this).nextAll('div.sri:first')).toggle();

    });​

ライブデモ

Answer 3

これを使って

$(function () {
$('a.clickMe').click(function () {
    // find first of following DIV siblings
    // with class "textBox" and toggle it
       $('div.sri').eq(1).toggle();
});
});