Question

我正在使用CSS-Tricks网站上的“Filtering Blocks”教程，该教程允许您按类别过滤项目列表。

它在我正在处理的活动网站上运行良好，但如果类别中没有项目，则无法显示消息，例如“此类别中没有即将发生的事件”。

该代码的工作原理是将类别导航中的ID与主列表中的类相匹配。 'style =“display：none;”'被添加到任何与用户所选类别不匹配的列表项。

以下是类别导航标记：

<ul id="category-filter">
    <li><a href="#" id="all" class="current">VIEW ALL</a></li>
    <li><a href="#" id="arts" class="filter">Arts</a></li>
    <li><a href="#" id="conference" class="filter">Conferences</a></li>
    <li><a href="#" id="exhib" class="filter">Exhibitions</a></li>
    <li><a href="#" id="faith" class="filter">Faith</a></li>
    <li><a href="#" id="lecture" class="filter">Lectures</a></li>
    <li><a href="#" id="open" class="filter">Open days</a></li>
    <li><a href="#" id="sport" class="filter">Sport</a></li>
</ul>

以下是一些事件的示例：

<ul id="events-list">
    <li class="event open">
        <h3><a href="#">Open day title</a></h3>
        <small>Date and time</small>
    </li>
    <li class="event conference">
        <h3><a href="#">Conference title</a></h3>
        <small>Date and time</small>           
    </li>
    <li class="event sport">
        <h3><a href="#">Sport title</a></h3>
        <small>Date and time</small>           
    </li>
</ul>

最后，jQuery代码：

$(function(){

    $("#all").click(function(){
        $(".event").slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

    $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".event").slideUp("fast");
        $("."+ thisFilter).slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

});

是否可以更改或添加此代码以在适当时显示“无事件”消息？如果是这样，我会非常感激任何帮助，因为我根本不知道从哪里开始！

非常感谢提前。

Answer 1

这应该有效：

专门添加<li>以显示找不到结果的消息：

<li class="event noresults">
    <h3>No results</h3>
    <small>please select a different category</small>           
</li>

将您的脚本更改为：

$(function() {

    // hide the noresults <li>
    $(".noresults").hide();

    $(".filter").click(function() {
        var thisFilter = $(this).attr("id");
        $(".event").slideUp("fast");

        // get a list of filtered items
        var $filteredItems = $("." + thisFilter);

        // if there are none, show something special
        if ($filteredItems.size() == 0) {
            // show the noresults message
            $(".noresults").slideDown("fast");
        }
        else {
            // open the filtereditems 
            $filteredItems.slideDown("fast");
        }
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });
});

Answer 2

$("."+ thisFilter).length会告诉您要显示的项目数量。然后，您可以在其中包含此消息的div，并根据此值显示或隐藏它。

使用jQuery插件过滤列表项时显示“无项目”消息

2 个答案: