jQuery-每次一次切換不同的類

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更改為以下為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>

然后在您的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 個解決方案

解決方案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