javascript - 当我点击一个字符时，我试图按字母顺序过滤我的列表

Question

如标题所示，当我点击其中一个字符(A、B、C、D ...)时，我试图按字母顺序过滤我的列表，但我无法让它工作。

这是我的 javascript 代码:

function makemyAlphabetplz(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}

var array = makemyAlphabetplz('a', 'z');

for(var i=0; i<array.length; i++) {
  $('#alphabet').append('<li class="character">' + array[i] + '</li>');
};

var triggers = $('.character');
var filters = $('.title');

filters.each(function(){
    $(this).addClass('letter-' + $(this).text().substr(0,1));
});

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var matches = filters.filter('.letter-' + takeLetter);
    matches.parent().fadeIn(222);

    if (matches.length == 0) {
        alert('There is no result for ' + takeLetter);
    };
});

这是我的 html:

<div class="container">
  <ul id="alphabet">
  </ul>

  <div class="filter-me">
    <h4 class="title"> Apple </h4>
  </div>
  [...]
</div>

我还制作了一个 JSFiddle .我感谢所有帮助和解释。

Answer 1

你可以试试。

<强>1。获取所有小写字母的文本并编辑指定字符串的开始位置

原创:

$(this).addClass('letter-' + $(this).text().substr(0,1));

编辑:

$(this).addClass('letter-' + $(this).text().substr(1,1).toLowerCase());

<强>2。获取所有小写字母的文本

原创:

var takeLetter = $(this).text();

编辑:

var takeLetter = $(this).text().toLowerCase();