更新

Question

我有一些JQuery做了很多东西，重新排序并添加链接到导航，但重要的是它应该隐藏每个导航链接，除了第一个（通过循环导航）当页面负载。循环的工作方式是隐藏每个没有class属性的链接：class="top"。除var page = ""时，此工作正常。从代码中可以看出，我正在尝试选择链接到“index.php”的导航链接，并在class="top"时向其添加var page = ""属性。我不知道这是否正确，但似乎有些东西打破了我的整个javascript文档。我甚至不知道它是在选择正确的元素还是添加class属性，因为当var page = ""没有任何导航链接被隐藏时。

有什么想法吗？谢谢你的帮助！

这是导航栏的HTML：

<nav>
    <ul id='nav'>
        <li><a href="index.php">Home</a></li>
        <li><a href="skillsets.php">Skillsets</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

这是我正在使用的JQuery：

var is_mobile = false,
    page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    var ul = $('nav > ul'),
        li = ul.children('li'),
        href = li.find('a[href*="'+page+'"]'),
        is404 = true;
    if($('#mobile').css('display')=='none') {
        is_mobile = true;       
    }
    if(is_mobile) {
        orderList();
        prepareList();
    }
    /************************************************************/
    /* Reorders the list relative to the page the user is on   */
    /**********************************************************/
    function orderList() {
        //remove the right border from the contact link
        $(li.find('a[href*="contact.php"]')).removeAttr('style');
        //move element to top
        ul.prepend(href.parent());
        //set top elements class to "top"
        $(href).attr( "class", "top" );
        if(page != ""){
            //loop through the nav elements
            li.children('a').each(function(){
                //if the name of the page the user is on matches one of the nav links execute the command
                if (page == $(this).attr('href')) {
                    is404 = false;
                }
            });
            if (is404) {
                //if the user is on a page not in the nav, add a 404 link at the top of the nav
                ul.prepend("<li><a href='404NotFound.php' class='top'>404</a></li>");
            }else if(page == ""){
                //set top links' class to "top"
                $(li.find('a[href*="index.php"]')).attr( "class", "top" );
            }else{
                $(href).attr( "class", "top" ); 
            }
        }
    };
    /*****************************************************************/
    /* Prepares the list to be dynamically expandable/collapsible   */
    /***************************************************************/
    function prepareList() {
        //loop through the nav elements and differentiate the first nav link and the remaining nav links
        li.children('a').each(function(){
            //check if the link has the class: "first"
            if ($(this).attr('class') == "top") {// attribute value matches variable value
                //make the first nav link function as the button to open and close the nav

            } else {// attribute doesn't exist, or its value doesn't match variable value
                //hide the remaining nav links with a slideUp animation
                $(this).slideUp("slow");
            }
        });
    }
});

Answer 1

由于我不是最好的正则表达式，我在lastIndexOf() & substring()的帮助下得到了字符串（ filename ）：

Fiddle

/*Getting File name*/
var is_mobile = false,
    path = document.location.pathname;
    var qpre = path.indexOf('?');
    if(qpre!=-1)
    {
        var page = path.substring(path.lastIndexOf('/')+1,path.lastIndexOf('?'));
    }
    else{
        var page = path.substring(path.lastIndexOf('/')+1);    
    }
/*End*/

/*Hiding li s with a href's not matching var page(string)*/
$('#nav li').each(function(){
    if($(this).children('a').attr('href')!=page)
    {
        $(this).hide();
    }
    if(page=="")
    {
        $('#nav li:nth-child(1)').show();
    }
});
/*End*/

更新

我编写了一个脚本，可以用更少的代码行完成所需的所有功能

var is_mobile = false,
page = document.location.pathname.match(/[^\/]+$/)||[""]/*[0]*/;

if(page=="")
{
    page="index.php";
}
var i=0;
$('#nav li a:not([href^="'+page+'"])').each(
function(){
    $(this).slideUp();
    i++;
}).promise()
.done( function() {
    if(i==$('#nav li a').length)
    {
        $('#nav').append('<li><a href="404.php">404</a></li>');
    }
});

Demo Fiddle

Answer 2

String.prototype.match在没有匹配时返回null（如空字符串）。我想你需要使用：

page = (document.location.pathname.match(/[^\/]+$/)||[""])[0]; // no path/relative

或

page = (document.location.pathname.match(/[^\/]+$/)||["/"])[0]; // root path

||使用回退字符串将错过的匹配函数默认设置为单个元素数组。

无法弄清楚如何正确调用元素

2 个答案:

Fiddle

更新

Demo Fiddle