切换按钮按类隐藏元素组，并在JavaScript或JQuery中显示下一步隐藏

请查看我的HTML标记：

<button class="btn">Toggle</button>   
<p class="para">This is a text</p>

<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none--> 


<button class="btn">Toggle</button>
<p class="para">This is a text</p>

<!--- .btn[1] only works for .para[1]-->


<button class="btn">Toggle</button>
<p class="para">This is a text</p>

<!--- .btn[2] only works for .para[2]-->

切换
这是一个文本
切换
这是一个文本
切换
这是一个文本

当点击

.btn[0]

时，

.para[0]

应该是

显示：block

，但是所有其他

段落[1]

，

段落[2]

，…，

段落[n]

将是

显示：none

---

如何在JavaScript或JQuery中实现这一点（无需添加唯一id）？

默认情况下，可以使用css隐藏所有

.para

：

.para {
    display: none
}

并使用下面的代码显示预期的段落以及隐藏其他段落

$('.btn').click(function() {
    $('.para').hide();
    $(this).next().show();
});

试试这个

$(document).ready(function(){
    $('.para').hide();
    $('.btn').click(function() {
        $('.para').hide();
        $(this).next().show();
    });
});  

---

看

哦，那你到底想要什么？指定你的问题…问题缺少问题。真奇怪。。我在复习课上得到了这个问题。所以我修正了无效的编辑，清理了标题，投票决定保留问题。。我没有通过审计。。。？！但现在问题又回来了，清楚了，充满活力了。。所以我没有通过审计。。审核失败：）+1，因为这将使禁用javascript的用户能够读取内容。