jQuery - переключать разные классы по одному

Question

jQuery - переключать разные классы по одному

0

Сначала я хотел бы извиниться, потому что мой макет кода не самый лучший. То, что я пытаюсь сделать здесь, - показать описание образца текста, нажав кнопку информации. Моя проблема в том, что когда я нажимаю любую из информационных кнопок, он отображает все описания всех образцов текста, когда он должен показывать только описание предполагаемого образца текста в каждый момент.

Я ценю вашу помощь. Заранее спасибо.

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

Crowbar 06 янв. 2014, в 02:53

Источник

0

@Derek朕會功夫朕會功夫 - «Новые» теги? user3163835 - Предполагается, что элементы dl напрямую не содержат ничего, кроме элементов dt и dd (поэтому у вас не должно быть элементов кнопки, если они не находятся внутри элементов dt, хотя, как обычно, браузеры прощают подобные вещи).
nnnnnn 06 янв. 2014, в 01:22
0

@nnnnnn - Ой, подождите, вы правы.
Derek 朕會功夫 06 янв. 2014, в 01:23

Теги:

javascript

jquery

2 ответа

3

+ Изменить

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

к

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

Потому что вам нужно выбрать не ВСЕ элементы dd, а только те, которые находятся рядом с кнопкой, которая была нажата.

dave 05 янв. 2014, в 22:55

Ещё вопросы

@Derek朕會功夫朕會功夫 - «Новые» теги? user3163835 - Предполагается, что элементы dl напрямую не содержат ничего, кроме элементов dt и dd (поэтому у вас не должно быть элементов кнопки, если они не находятся внутри элементов dt, хотя, как обычно, браузеры прощают подобные вещи).

Stefanos Vakirtzis · Accepted Answer · 2014-01-05T22-28-00.000Z

Измените html на следующие добавления идентификаторов в 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");
   });           
});

Зачем вам менять html и повторять один и тот же код для разных идентификаторов, когда вы можете сделать все это с тремя строками кода, которые работают с существующим html? Не повторяйся. ,
ну на самом деле, когда я писал этот ответ, не проверял выше, что, очевидно, лучше :)
Мне пришлось немного изменить свой HTML, но я получил его благодаря вам. Я ценю вашу помощь по этому вопросу.