jQuery/HTML-应用字母过滤器时添加无结果消息 [英] jQuery / HTML - add a no results message when alphabetical filter is applied

问题描述

已根据上一个问题改编了jQuery代码()来创建AZ过滤器，如下所示:

Have adapted the jQuery code from this previous question (Need to show All option is Letter-based Navigation using jQuery) to create an A-Z filter like so:

HTML:

<div class="az-controls"> <a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a  href="#">Z</a> </div>

<ul id="inpageUL">
<li><a href="#">Apples</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Carrots</a></li>
<li><a href="#">Corn</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Easels</a></li>
<li><a href="#">Fish</a></li>
<li><a href="#">Greens</a></li>
<li><a href="#">Hectares</a></li>
<li><a href="#">Hemp</a></li>
<li><a href="#">Igloos</a></li>
<li><a href="#">Islands</a></li>
<li><a href="#">Jams</a></li>
<li><a href="#">Limes</a></li>
<li><a href="#">Lemons</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Peaches</a></li>
<li><a href="#">Radishes</a></li>
<li><a href="#">Squid</a></li>
<li><a href="#">Trees</a></li>
<li><a href="#">Weeds</a></li>
</ul>

jQuery:

$(function () {
var _alphabets = $('.az-controls > a');
var _contentRows = $('#inpageUL li');

_alphabets.click(function () {      
    var _letter = $(this), _text = $(this).text(), _count = 0;
    if(_text == 'All') _text = '.';
    _alphabets.removeClass("active");
    _letter.addClass("active");

    _contentRows.hide();
    _contentRows.each(function (i) {
        var _cellText = $(this).children('a').eq(0).text();
        if (RegExp('^' + _text).test(_cellText)) {
            _count += 1;
            $(this).fadeIn(400);
        }
    });    
});
}); 

是否可以调整jQuery以包括没有结果的字母条件?即并打印一个带有这封信没有结果"的li.

Is it possible to tweak the jQuery to include a condition for letters with no results? i.e and print an li with "there are no results for this letter".

还有第二个相关问题；是否可以加载带有已过滤的特定字母的页面(例如从超链接)?

And a second related question; is it possible to load the page (say from a hyperlink) with a specific letter already filtered?

推荐答案

您可以在ul上添加额外的li并根据情况显示/隐藏. HTML:

You can add an extra li to the ul and show/hide based on condition. HTML:

<div class="az-controls"> <a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a  href="#">Z</a> </div>
<ul id="inpageUL">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Bananas</a></li>
    <li><a href="#">Carrots</a></li>
    <li><a href="#">Corn</a></li>
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Easels</a></li>
    <li><a href="#">Fish</a></li>
    <li><a href="#">Greens</a></li>
    <li><a href="#">Hectares</a></li>
    <li><a href="#">Hemp</a></li>
    <li><a href="#">Igloos</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Jams</a></li>
    <li><a href="#">Limes</a></li>
    <li><a href="#">Lemons</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Peaches</a></li>
    <li><a href="#">Radishes</a></li>
    <li><a href="#">Squid</a></li>
    <li><a href="#">Trees</a></li>
    <li><a href="#">Weeds</a></li>
    <li class="no-result" style="display: none">No result</li>
</ul>

jQuery:

$(function () {
        var _alphabets = $('.az-controls > a');
        var _contentRows = $('#inpageUL li:not(.no-result)');

        _alphabets.click(function () {
            var _letter = $(this), _text = $(this).text(), _count = 0;
            if(_text == 'All') _text = '.';
            _alphabets.removeClass("active");
            _letter.addClass("active");

            _contentRows.hide();
            _contentRows.each(function (i) {
                var _cellText = $(this).children('a').eq(0).text();
                if (RegExp('^' + _text).test(_cellText)) {
                    _count += 1;
                    $(this).fadeIn(400);
                }
            });
            if(_count === 0) $('.no-result').show();
            else $('.no-result').hide();
        });
    });

这篇关于jQuery/HTML-应用字母过滤器时添加无结果消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！