jQuery：使用类过滤 div

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 语句，以便在显示之前不会隐藏所有内容。