jQuery: фильтрация div с классами

Question

jQuery: фильтрация div с классами

0

У меня возникают проблемы с этим небольшим проектом, над которым я работаю (для себя... для организации аниме, которое я смотрел/не смотрел).

Вот мой jQuery

    $("#all").click(function(){
        $(".anime").show(100);
    });

    $("#favorites").click(function() {
        $(".fav").show(100);
        $(".completed:not(.fav)").hide(100);
        $(".watchlist").hide(100);
    });

    $("#completed").click(function() {
        $(".completed").show(100);
        $(".fav:not(.completed)").hide(100);
        $(".watchlist").hide(100);
    });

    $("#watchlist").click(function(){
        $(".completed").hide(100);
        $(".fav").hide(100);
    });

Мне удалось отфильтровать divs в зависимости от классов, которые у них были, и он отлично подходит для избранных, завершен, и все, кроме списка наблюдения, являются ошибками. Если я перехожу из избранных или закончен в список просмотра, то мои списки дневных списков не отображаются. Мои списки просмотра списка отображаются, если я нажимаю на него, начиная со всех, а остальные работают, если я начинаю с списка наблюдения... поэтому я не уверен, где я ошибся.

marianaihh 09 апр. 2014, в 22:33

Источник

0

Можете показать демонстрационный сайт или скрипку ?
kei 09 апр. 2014, в 20:13
0

Может быть, вы упускаете $ (". Наблюдения"). Show (100); в вашем событии #watchlist?
Chris 09 апр. 2014, в 20:21
0

@ Крис Да ... это была проблема ... большое спасибо!
marianaihh 09 апр. 2014, в 20:45
0

Рад был помочь :)
Chris 09 апр. 2014, в 20:46

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

Теги:

jquery

html

filtering

1 ответ

Ещё вопросы

Можете показать демонстрационный сайт или скрипку ?
Может быть, вы упускаете $ (". Наблюдения"). Show (100); в вашем событии #watchlist?
@ Крис Да ... это была проблема ... большое спасибо!

Chris · Accepted Answer · 2014-04-09T19-18-00.000Z

Вы не выполняете какой-либо метод show() в событии clicklist, поэтому, вероятно, ничего не отображается. Чтобы исправить это, просто замените событие:

$("#watchlist").click(function(){
    $(".completed").hide(100);
    $(".fav").hide(100);
    $(".watchlist").show(100);
});

То, как вы создали это, приведет к экспоненциально большому сценарию, когда вы планируете добавить больше вещей в будущем. Я бы посоветовал обобщить его немного.

HTML:

<a href='#' rel='anime' class='toggler'>All</a>
<a href='#' rel='fav' class='toggler'>Favorites</a>
<a href='#' rel='watchlist' class='toggler'>Watchlist</a>
<a href='#' rel='completed' class='toggler'>Completed</a>

Javascript:

$(".toggler").click(function(e) {
    e.preventDefault();
    $(".anime").hide(100);
    $("." + $(this).attr('rel')).show(100);
});

Поскольку шоу появляется после скрыть, вам не нужно использовать: not() в ваших селекторах CSS. Вы можете создать оператор if для кнопки "все", чтобы перед показом не скрывалось все.

Спасибо за помощь ... Вы правы. Сценарий будет слишком длинным, если будет решено добавить больше фильтров. Я попробую то, что вы предложили.