Question

我正在努力完成这个小项目（为了我自己......组织动漫，我已经看过/没有看过）。

这是我的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);
    });

我设法根据他们所拥有的类来过滤div，它非常适合收藏，已完成，但除了监视列表之外都是错误的。如果我从收藏夹或完成观看列表，我的监视列表div不会出现。我的观察列表div出现，如果我从所有点开始点击它，其他人工作，如果我从观察列表开始...所以我不知道我哪里出错了。

Answer 1

你没有在监视列表点击事件中执行任何show（）方法，这可能就是为什么没有显示的原因。要修复它，只需用以下内容替换事件：

$("#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);
});

由于节目在隐藏之后出现，因此您不必在CSS选择器中使用：not（）。您可以为all按钮创建一个if语句，以便在显示之前不会隐藏所有内容。

jQuery：用类过滤div

1 个答案: