如何在未找到结果时显示消息-解网

问：

当未找到结果时，我将如何调整此代码以在页面上显示 a？<div>No Results Found</div>

我有一个简单的图像库，其中包含一个输入，用于根据属性的内容过滤结果：data-filter

<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
    <div class="gallery-thumbnail" data-filter="Apple">image</div>
    <div class="gallery-thumbnail" data-filter="Orange">image</div>
    <div class="gallery-thumbnail" data-filter="Banana">image</div>
</div>

还有 jQuery：

$("#filter").keyup(function() {
    var value = $(this).val().toLowerCase();
    $(".gallery-thumbnail").filter(function() {
        $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
    });
});

JavaScript jQuery

$(document).ready( function(){
    $("#filter").keyup( function(){
        var value = $(this).val().toLowerCase();
        $(".gallery-thumbnail").filter(function() {
            $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
        });
        $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
    });
});

演示

$(document).ready( function(){
    $("#filter").keyup( function(){
        var value = $(this).val().toLowerCase();
        $(".gallery-thumbnail").filter(function() {
            $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
        });
        $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
    <div class="gallery-thumbnail" data-filter="Apple">image</div>
    <div class="gallery-thumbnail" data-filter="Orange">image</div>
    <div class="gallery-thumbnail" data-filter="Banana">image</div>
    <div class="noresult" style="display:none">No Results Found</div>
</div>

0赞 Steve -Cutter- Blades 10/8/2021 #2

你把 'No Results' div 放在页面上，有一个类，最初默认它是隐藏的（）。如果筛选器未返回任何结果，则向 div 添加一个类以显示它（）。清除筛选器后，再次获得结果后，将删除“show”类，将其恢复为默认的“隐藏”状态。display:nonedisplay: block

上一个：是否可以在没有包装器的情况下在固定宽度的 div 上创建全宽背景？

下一个：如何创建一个 100% 宽度的错觉，它实际上是固定宽度的（带 bg 颜色）[复制]

如何在未找到结果时显示消息

How to show a message when no results are found

评论