需要显示所有选项是使用 jQuery 的基于字母的导航

Posted 2023-05-08

【中文标题】需要显示所有选项是使用 jQuery 的基于字母的导航

【英文标题】：Need to show All option is Letter-based Navigation using jQuery

【发布时间】：2013-06-14 07:05:05

【问题描述】：

我将应用基于字母的导航来过滤表格和列表的内容。单击其中一个字母时，过滤列表/表格以仅显示列表/表格中以该字母开头的项目。

但我面临的问题是“所有列表”。我还需要显示“全部”链接，谁能帮我添加“全部”链接..

$(function () 
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function ()       
        var _letter = $(this), _text = $(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

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

这里是Demo 链接...

谢谢...

【参考方案1】：

仅在文本不等于All时应用Regex

$(function () 
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () 
        var _letter = $(this),
            _text = $(this).text(),
            _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

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

Check Fiddle

【参考方案2】：

只显示所有tr onclick()

$('a').first().click(function()
$('#countries-table tbody tr').fadeIn(400);
);

link to jsfiddle

【参考方案3】：

[更新]

一个简单的

只需添加这一行：

if(_text == 'All') _text = '.';

DEMO

编辑：

根据你的意愿，这个代码可以让你淡化没有单词的字母：

_alphabets.not(':first').css('opacity','0.5');
_contentRows.each(function()
    var beg = $(this).children('td:first').text().trim()[0];
    $('.alphabet a:eq('+(beg.charCodeAt(0)-64)+')').css('opacity','1.0');
);

DEMO

说明：我在这里所做的是获取所有 trs 中每个第一个 td 的第一个字母，然后将其转换为 ascii (A=65 ..) 然后减去 64，以便第一个索引从 1 (A) 开始，依此类推（因为索引 0 代表“全部”）

注意：您根本不必使用正则表达式，因为您只是比较第一个字符，您可以通过取消正则表达式来提高效率。

【讨论】：

哇，完成...感谢您的帮助... :).. 一个问题？ , 如果没有数据，我们可以淡化字母 bg 颜色吗...？

例如“D”类别没有数据，我需要为字母“d”添加一个类。可以吗？