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

用这个

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

Answer 2

试试这个 ：

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 3

为什么需要额外的课程这将解决您的问题

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

    });​

现场演示