Question

首先，我要道歉，因为我的代码布局并不是最好的。我在这里要完成的是通过按信息按钮显示文本示例的描述。我的问题是当我按下任何信息按钮时，它会显示所有文本样本的所有描述，当它应该每次只显示预期文本样本的描述时。

感谢您的帮助。提前谢谢。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function() {
                $("dd").hide();
                $(".btn1").click(function() {
                    $("dd").toggle("slow");
                });
                $("dd").hide();
                $(".btn2").click(function() {
                    $("dd").toggle("slow");
                });
                $("dd").hide();
                $(".btn3").click(function() {
                    $("dd").toggle("slow");
                });
            });
        </script>
    </head>
    <body>
        <dl>
            <dt>Coffee</dt>
            <button class="btn1">+ Info</button>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <button class="btn2">+ Info</button>
            <dd>White cold drink</dd>
            <dt>Water</dt>
            <button class="btn3">+ Info</button>
            <dd>Transparent fluid</dd>
        </dl> 
    </body>
</html>

Answer 1

更改

$(".btn1").click(function(){
    $("dd").toggle("slow");
 });

要

$("button").click(function(){
    $(this).next('dd').toggle("slow");
});

因为您不需要选择所有dd元素，而只需要选择单击按钮旁边的元素。

Answer 2

将您的html更改为以下添加ID到dd：

<body>
        <dl>
            <dt>Coffee</dt>
            <button class="btn1">+ Info</button>
            <dd id="dd1">Black hot drink</dd>
            <dt>Milk</dt>
            <button class="btn2">+ Info</button>
            <dd id="dd2">White cold drink</dd>
            <dt>Water</dt>
            <button class="btn3">+ Info</button>
            <dd id="dd3">Transparent fluid</dd>
        </dl> 
    </body>

然后在你的jquery脚本中：

$(document).ready(function() {
            $("dd").hide();
            $(".btn1").click(function() {
                $("#dd1").toggle("slow");
            });
            $("dd").hide();
            $(".btn2").click(function() {
                $("#dd2").toggle("slow");
            });
            $("dd").hide();
            $(".btn3").click(function() {
                $("#dd3").toggle("slow");
            });
        });

以下是JSFiddle

编辑：

以上代码的较短版本在较少的代码行中实现了相同的结果：

$(document).ready(function() {
   $("dd").hide();
   $("dl button").click(function() {
     $("dd").hide();

     var number = $(this).attr('class').substr(-1);
     $("#dd"+number).toggle("slow");
   });           
});

jQuery - 在每个类中一次切换不同的类

2 个答案: