JQuery для переключения нескольких элементов

Question

JQuery для переключения нескольких элементов

0

Я не могу заставить эту часть кода работать:

$("a.expand_all").on("click",function(){
    $(this).text('Hide');
    $('.answer').each(function () {
        $(this).slideDown(150, function () {
            $(this).show();
        });
    });
}, function () {
    $(this).text('Expand');
    $('.answer').each(function () {
        $(this).slideUp(150, function () {
            $(this).hide();
        });
    });
});

Я пытаюсь свернуть расходование нескольких div, но ничего не происходит при событии click. Я использую последний jQuery 1.10.1

Mike 19 окт. 2013, в 00:10

Источник

0

у вас есть готовый обработчик? $(document).ready(function(){ }) вокруг кода jquery?
karthikr 18 окт. 2013, в 21:26
0

a.expand_all нибудь из ваших элементов (например, a.expand_all ) динамически добавляются с помощью jQuery?
Ethan Brown 18 окт. 2013, в 21:27
0

@EthanBrown Как это имеет значение? ОП правильно использовал делегирование.
karthikr 18 окт. 2013, в 21:28
0

Я могу ошибаться, но это может не сработать, потому что вы вызываете обе половины события click одновременно?
Stephen Raghunath 18 окт. 2013, в 21:39
0

На самом деле, нет, это не так. jsfiddle для демонстрации: jsfiddle.net/Jammerwoch/sRnkw/1
Ethan Brown 18 окт. 2013, в 21:39
0

Да, у меня есть готовый обработчик кода, и элементы не добавляются динамически. Также класс .answer настроен на отображение: нет в css. Глядя на firebug, ничего не срабатывает при событии click console.log ($ (this))
Mike 18 окт. 2013, в 22:10

Показать ещё 4 комментария

Теги:

javascript

jquery

html

toggle

collapse

2 ответа

1

Это не похоже на обязательное связывание событий со мной, имея две функции.

HTML - я добавил обертку div для делегирования

<div class="expando_content">
<a class="expand_all" href="#">Expand</a>

    <p class="answer">I'm an answer!</a>
        <p class="answer">Another answer</a>
            <p>Dynamically added "expand more" goes below...it won't work :(</p>
            <div id="thing"></div>
        </p>
    </p>
</div>

JS - переместил функциональность переключения в одну функцию.

$(".expando_content").on("click", ".expand_all", function () {

    if (!$('.answer').is(':visible')) {
        $(this).text('Hide');
        $('.answer').each(function () {
            $(this).slideDown(150, function () {
                $(this).show();
            });
        });
    } else {
        $(this).text('Expand');
        $('.answer').each(function () {
            $(this).slideUp(150, function () {
                $(this).hide();
            });
        });
    }
});

$('<a class="expand_all" href="#">expand more</a>').appendTo($('#thing'));

jsFiddle

Benjamin Warren 18 окт. 2013, в 20:18

0

Спасибо, я воспользовался обоими предложениями и нашел рабочее решение: '$ ("a.expand_all"). On ("click", function () {if (! $ ('. Answer '). Is (': visible ')) {$ (this) .attr (' data-hint ',' Hide All '); $ ('. answer '). slideDown (150);} else {$ (this) .attr (' data- подсказка ',' Развернуть все '); $ ('. answer '). slideUp (150);}});'
Mike 18 окт. 2013, в 22:29
0

Пожалуйста.
Benjamin Warren 18 окт. 2013, в 22:42

Ещё вопросы

у вас есть готовый обработчик? $(document).ready(function(){ }) вокруг кода jquery?
a.expand_all нибудь из ваших элементов (например, a.expand_all ) динамически добавляются с помощью jQuery?
@EthanBrown Как это имеет значение? ОП правильно использовал делегирование.
Я могу ошибаться, но это может не сработать, потому что вы вызываете обе половины события click одновременно?
На самом деле, нет, это не так. jsfiddle для демонстрации: jsfiddle.net/Jammerwoch/sRnkw/1
Да, у меня есть готовый обработчик кода, и элементы не добавляются динамически. Также класс .answer настроен на отображение: нет в css. Глядя на firebug, ничего не срабатывает при событии click console.log ($ (this))
Спасибо, я воспользовался обоими предложениями и нашел рабочее решение: '$ ("a.expand_all"). On ("click", function () {if (! $ ('. Answer '). Is (': visible ')) {$ (this) .attr (' data-hint ',' Hide All '); $ ('. answer '). slideDown (150);} else {$ (this) .attr (' data- подсказка ',' Развернуть все '); $ ('. answer '). slideUp (150);}});'

Ethan Brown · Accepted Answer · 2013-10-18T20-07-00.000Z

Мне кажется, что вы используете метод jQuery .on неправильно. Этот метод имеет некоторые перегрузки, но ни один из них (разумно) не выполняет две функции.

Если я понимаю, что вы пытаетесь сделать правильно, вы просто хотите переключить некоторые элементы ответа при нажатии тега <a>. Что вам действительно нужно сделать, так это определить способ расширения ваших ответов или нет. Существует несколько способов сделать это, но я решил использовать элемент данных:

<a class="expand_all" href="#" data-collapsed="true">expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>

Тогда ваш JavaScript можно упростить:

$('a.expand_all').on("click",function(){
    if( $(this).data('collapsed') ) {
        $(this).text('hide').data('collapsed','');
        $('.answer').slideDown(150);
    } else {
        $(this).text('expand').data('collapsed','true');
        $('.answer').slideUp(150);
    }
});

Я упростил некоторые из ваших конструкций. В частности, в вашем коде:

$('.answer').each(function () {
    $(this).slideDown(150, function () {
        $(this).show();
    });
});

Не .each. Просто применение метода jQuery по существу эквивалентно вызову .each. Вам редко приходится использовать .each. Таким образом, это упрощает:

$('.answer').slideDown(150, function () {
    $(this).show();
});

Затем .slideDown показывает элемент до его запуска, поэтому нет необходимости вызывать .show второй раз. Поэтому мы можем избавиться от обратного вызова, упрощая все это, чтобы:

$('.answer').slideDown(150);

Вы можете увидеть все это в действии здесь:

http://jsfiddle.net/Jammerwoch/sRnkw/5/

Наконец, причина, по которой я спросил, динамически добавлен ли какой-либо из ваших элементов, заключается в том, что, если они есть, то, как вы их прикрепляете, не будет работать. То есть, селектора jQuery запускаются один раз, а затем не запускаются повторно при добавлении новых элементов. Поэтому вы должны быть более умными. Это описано в jsfiddle выше. Дайте мне знать, если вам нужно больше разъяснений по этому вопросу.