javascript - 使用 jquery 显示/隐藏文本

Question

基本上我有 6 个按钮和 6 个段落(每个按钮与特定段落相关)。我想在单击某个按钮时显示一段文本，然后在再次单击该按钮时隐藏该段。

我已经看过类似的问题，但似乎无法让它发挥作用。我认为这是因为我才刚刚开始尝试使用 jquery 并且并不真正理解这个问题。所有 hep 将不胜感激!谢谢!

html:

     <div class="button"><div class="button float_l"><a href="#">More..</a></div>
     <div class="button"><div class="button float_l"><a href="#">More..</a></div>
     <div class="button"><div class="button float_l"><a href="#">More..</a></div>   


        <p><div id="text1">Paragraph 1</div></p>

        <p><div id="text2">Paragraph 2</div></p>

        <p><div id="text3">Paragraph 3</div></p>

JavaScript:

     $(document).ready(function () {

     $("#text1").hide();
     $(".button").click(function(){
     $("#text1").toggle();

     $("#text2").hide();
     $(".button").click(function(){
     $("#text1").toggle();

     });

第一个按钮应该与第一段相关，依此类推。我尝试使用“this”函数来关联特定按钮，但一定是使用不当，因为它不起作用。

Answer 1

首先，您必须识别不同的按钮，如果您使用“按钮”类，您将始终指代所有 3 个按钮。

此外，您不需要将 div 元素放在 p 元素中。

所以你可以这样做:

<div id="btn1" class="button"><a href="#">More..</a></div>
<div id="btn2" class="button"><a href="#">More..</a></div>
<div id="btn3" class="button"><a href="#">More..</a></div>   


<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>

然后，javascript:

$(document).ready(function () {

    $("p").hide();

    $("#btn1").click(function(){
         $("#p1").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });
});