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

Question

我有一些 JQuery，它可以执行大量重新排序和向导航添加链接的操作，但重要的部分是，当页面打开时，它应该隐藏除第一个导航链接之外的每个导航链接(通过循环浏览导航)负载。循环的工作方式是隐藏每个不具有 class 属性的链接:class="top"。这工作正常，除了 var page = "" 时。正如您从代码中看到的，我尝试选择链接到“index.php”的导航链接，并在 var page = 时向其添加 class="top" 属性“”。我不知道这是否正确，但似乎有什么东西破坏了我的整个 javascript 文档。我什至不知道它是否选择了正确的元素或添加了类属性，因为当 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() 的帮助下，我在 fiddle 中得到了 string(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