此处的this.href没有返回href。

Question

我不确定是不是因为我使用的是WordPress，但this.href在具有href属性的项目上没有返回它们的href（例如，在“联系”上，它返回http://www.domain.net/undefined而不是http://www.domain.net/contact）。如果我删除脚本，导航菜单可以正常加载href。

以下是JS代码：

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

这是一个 PHP WordPress 文件。

<div id="nav_wrap">
        <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
    </div>

以下是 Wordpress 返回的 HTML 格式内容。

<div id="nav_wrap">
        <div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.domain.net">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.domain.net/jobs/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.domain.net/breweries/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.domain.net/contact/">Contact</a></li>
</ul></div></div>
    </div>

- Packy

---

你尝试过使用 event.target.href 而不是 this.href 吗？我不确定，但是 this 可能指的是 li 而不是 a。 - Niccolò Campolungo

Answer 1

这是因为您在.menu-item上运行选择器，它是一个<li>。它没有href属性。

您需要选择<li>标签中的<a>标签。以下代码可以实现此目的：

$(".menu-item a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#page-wrap").fadeOut(1000, redirectPage);        
});

与选择<li>和其子元素<a>的其他答案相比，这种方法的好处是只有在用户单击实际链接时才会运行。其他方法将在单击<li>中的任何位置时运行，这取决于您的CSS，可能超出实际链接空间之外。 带有工作示例的jsFiddle。

- Luke Shaheen

---

@Connor href 属性是浏览器本身的属性，而不是 jQuery 的构造。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a - Ken

@Ken 不要回复他，他只是在耍嘴皮子。只需标记他的评论并忽略这个喷子。 - Luke Shaheen

@John 我甚至没想到那个。谢谢!! 也感谢所有回帖的人。 - Packy

Answer 2

菜单项 没有返回 href，因为它是一个 <li/> 元素。

你需要定位菜单项的 <a> 子元素。

linkLocation = $(this).children('a').attr('href');

- Ken

---

这会强制选择进入两个步骤，同时它在<li>空间中的任何位置运行，而不仅仅是直接在链接上。这可能违反用户的期望。 - Luke Shaheen

Answer 3

既然你正在使用jQuery，你可能想要全部使用jQuery：

linkLocation = $(this).children('a').attr('href');

- Jonny Sooter

Answer 4

将 linkLocation = this.href; 改为 linkLocation = $(this).attr('href'); 或者如果不起作用，请尝试 linkLocation = $(this).find('a').attr('href');。

- Mic1780

Answer 5

看起来你的href属性仅与<a>标签相关联，但点击事件被添加到了<li>标签上。请将代码更改为$(".menu-item a").click ...

- Constablebrew