jQuery-每次一次切换不同的类

Question

First I'd like to apologize because my code layout isn't the best. 首先，我想道歉，因为我的代码布局不是最好的。 What I'm trying to accomplish here is to display a description of a text sample by pressing an info button. 我要在这里完成的工作是通过按信息按钮来显示文本示例的描述。 My problem is when I press any of the info buttons, it displays all the descriptions of all text samples, when it should show only the description of the intended text sample at each time. 我的问题是，当我按下任何一个信息按钮时，它会显示所有文本样本的所有描述，而每次应仅显示目标文本样本的描述。

I appreciate your help. 我感谢您的帮助。 Thanks in advance. 提前致谢。

<!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

Change 更改

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

To 至

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

Because you need to select not ALL dd elements, but only the ones that are next to the button that was clicked. 因为您不需要选择所有dd元素，而是仅选择单击按钮旁边的元素。

Answer 2

Change your html into the following adding IDs to the dd : 将您的html更改为以下为dd添加ID：

<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>

Then in your jquery script : 然后在您的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");
            });
        });

Here is the JSFiddle 这是JSFiddle

EDIT : 编辑：

Here is a shorter version of the above code achieving the same result in less code lines: 这是上述代码的较短版本，其代码行更少，从而达到相同的结果：

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

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

jQuery-每次一次切换不同的类

问题描述

2 个解决方案

解决方案1
3 2014-01-06 01:16:11

解决方案2
0 已采纳 2014-01-06 01:23:29

jQuery-每次一次切换不同的类

问题描述

2 个解决方案

解决方案1 3 2014-01-06 01:16:11

解决方案2 0 已采纳 2014-01-06 01:23:29

解决方案1
3 2014-01-06 01:16:11

解决方案2
0 已采纳 2014-01-06 01:23:29