jQuery / HTML - 根據URL中的ID /＃，在頁面加載時執行現有的az jQuery過濾器（特定字母）

Question

是否可以在頁面加載時根據頁面URL中的書簽ID /＃值分配活動類，然后執行現有的jQuery過濾器功能？

例如， http：//localhost/mypage.html#az-a thens執行字母“A”過濾器。

HTML：

<div class="az-controls">
<a href="#">All</a> <a href="#" id="az-a">A</a> <a href="#" id="az-b">B</a> <a href="#" id="az-c">C</a> <a href="#"  id="az-d">D</a> <a href="#" id="az-e">E</a> <a href="#" id="az-f">F</a> <a href="#" id="az-g">G</a> <a href="#" id="az-h">H</a> <a href="#" id="az-i">I</a> <a href="#" id="az-j">J</a> <a href="#" id="az-k">K</a> <a href="#" id="az-l">L</a> <a href="#" id="az-m">M</a> <a href="#" id="az-n">N</a> <a href="#"  id="az-o">O</a> <a href="#" id="az-p">P</a> <a href="#" id="az-q">Q</a> <a href="#" id="az-r">R</a> <a href="#" id="az-s">S</a> <a href="#" id="az-t">T</a> <a href="#" id="az-u">U</a> <a href="#" id="az-v">V</a> <a href="#" id="az-w">W</a> <a href="#" id="az-x">X</a> <a href="#" id="az-y">Y</a> <a href="#" id="az-z">Z</a>

<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();
    });
});

目的是能夠列出其他網頁上的AZ鏈接和索引頁面的超鏈接，並使用之前應用的字母過濾器。

這是這個問題的第二部分： jQuery / HTML - 在應用字母過濾器時添加無結果消息

Answer 1

使用window.location.hash從url獲取哈希值，然后將其用作選擇器以匹配字母錨點的id

就像是：

var hash = location.hash;// will include the # prefix if there is one
if (hash && hash.indexOf('az-') > -1){
  $(hash).addClass('active')
}

Answer 2

您可以使用localtion.hash解析來實現此目的。

$(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();
        });

        var hash = location.hash;
        if(hash && hash !== '#' && $(hash).length > 0) $(hash).click(); //will trigger click on a
    });