jQuery/HTML-根据URL中的ID/#在页面加载时执行现有的a-z jQuery过滤器(具有特定字母) [英] jQuery / HTML - execute existing a-z jQuery filter (of a specific letter) on page load, based on ID/# in URL

问题描述

是否可以在页面加载时根据页面URL中的书签ID/#value分配活动类，然后执行现有的jQuery过滤器功能?

Is it possible on page load to assign an active class based on the bookmark ID/#value in the page URL, to then execute an existing jQuery filter function?

例如 http://localhost/mypage.html#az-a 然后执行字母"A"过滤器.

For example http://localhost/mypage.html#az-a thens execute the letter 'A' filter.

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

目的是能够列出其他网页上的A-Z链接，并使用事先应用的字母过滤器超链接到索引页.

The purpose is to be able to list the A-Z links on other web pages and hyperlink to the index page with a letter filter applied prior.

这是此问题的第二部分:

This is the second part to this question: jQuery / HTML - add a no results message when alphabetical filter is applied

推荐答案

您可以使用localtion.hash解析来实现.

You can use localtion.hash parsing to achieve this.

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

这篇关于jQuery/HTML-根据URL中的ID/#在页面加载时执行现有的a-z jQuery过滤器(具有特定字母)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！