Question

所以我为列表创建了一个非常简单的过滤导航，请参阅JS小提琴

正如您所看到的那样，有一个6号选项，但是没有第6号的标准。

因此，当单击“FILTER SIX”时，当前列表显示为空白。

但是我想要一条消息显示为“没有结果匹配那个标准。”

$('#filterOptions div').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('name');
    // reset the active class on all the buttons
    $('#filterOptions div').removeClass('active');
    // update the active state on our clicked button
    $(this).addClass('active');
    if (ourDataAttr == 'all') {
        // show all our items
        $('#content').find('.item').fadeIn(500);
    } 
    else {
        // hdatee all elements that don't share ourClass
        $('#content').find('.item:not([data-name="' + ourDataAttr + '"])').fadeOut(500);
        // show all elements that do share ourClass
        $('#content').find('.item[data-name="' + ourDataAttr + '"]').fadeIn(500);
    }
    return false;
});

Answer 1

在fadein发生时获取值fadein。检查长度，突出显示您的错误消息。

        var x= $('#content').find('.item[data-name="' + ourDataAttr + '"]').fadeIn(500);
        if(x.length==0){
        alert('No Results Match That Criteria.');
        }

Live Demo

Answer 2

herr是一个小提琴：http://jsfiddle.net/H9Gj3/7/

除了我使用

添加/删除内容div的消息之外，

基本上像@hari一样

    if($('#content').find('.item[data-name="' + ourDataAttr + '"]').length == 0){
            $('#content').append('<li class="no-item">No Results Match That Criteria.</li>');
    }else $('.no-item').remove();

过滤列表后，如何显示“无结果匹配该条件”？

2 个答案: