函数参数破坏EventListener中的JS默认值

Question

我正试图用JS元素(手风琴样式(制作一个相当基本的导航菜单。

当JS打破时，我似乎陷入了一种停滞不前的想法

function subMenu(e) {
alert(e);
}
function jsDetect() {
var subs = document.getElementsByClassName('sub-nav');
for (var i = 0; i < subs.length; ++i) {
var item = subs[i];
item.classList.add('hide');
}
const divs = document.querySelectorAll('.sub-link');
divs.forEach(el => el.addEventListener('click', function(r) {
r.preventDefault();
subMenu(el);
}), false);
}
window.onload = jsDetect;

ul.nav {
text-transform: uppercase;
background: rgba(0, 0, 0, 1);
color: white;
}
ul.nav a:link {
color: white;
text-decoration: none;
display: block;
padding: 0.3em;
}
ul.nav,
ul.nav li {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.nav li {
padding: 0.55em;
}
.main-nav {
font-weight: bold;
font-family: 'Source Sans Pro Black', sans-serif;
border-top: 1px solid white;
}
.sub-nav {
background: rgba(255, 255, 255, 0.1);
}
.sub-nav a:hover {
background: rgba(255, 255, 255, 0.3);
}
.sub-nav.hide {
display: none;
}
.sub-nav.show {
display: block
}

<ul class="nav">
<li class="main-nav" id="home-nav"><a href="home">home</a></li>
<li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="food/add">add</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="food/list">list</a></li>
<li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="articles/add">add</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="articles/list">list</a></li>
<li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>

上面的操作很好，显示了一个警告框，其中包括当它包含类"时单击的链接的整个url；子链路"；

但我真正需要它做的是让我知道url的最后一部分，例如"；食物；或"；文章"；

我想在subMenu函数中添加e.lastIndexOf('/'(和substr((

e.lastIndexOf不是函数

我很困惑。非常感谢您的帮助

Answer 1

您可以使用获得链接的最后一部分

console.log(e.getAttribute("href"));

请参阅此处：

function subMenu(e){
console.log(e.getAttribute("href"));
}
function jsDetect(){
var subs = document.getElementsByClassName('sub-nav');
for(var i = 0; i < subs.length; ++i) {
var item = subs[i];
item.classList.add('hide');
}
const divs = document.querySelectorAll('.sub-link');
divs.forEach(el => el.addEventListener('click',function(r){r.preventDefault();subMenu(el);}),false);
}
window.onload = jsDetect;

ul.nav {text-transform: uppercase; background: rgba(0,0,0,1); color: white;}
ul.nav a:link {color: white; text-decoration: none; display: block; padding: 0.3em;}
ul.nav, ul.nav li {list-style-type: none; padding: 0; margin: 0;}
ul.nav li {padding: 0.55em;}
.main-nav {font-weight: bold; border-top: 1px solid white;}
.sub-nav {background: rgba(255,255,255,0.1);}
.sub-nav a:hover {background: rgba(255,255,255,0.3);}
.sub-nav.hide {display: none;}
.sub-nav.show {display: block}

<ul class="nav">
<li class="main-nav" id="home-nav"><a href="home">home</a></li>
<li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li> 
<li class="sub-nav articles-sub-nav"><a href="food/add">add</a></li>
<li class="sub-nav articles-sub-nav"><a href="food/list">list</a></li>
<li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li> 
<li class="sub-nav articles-sub-nav"><a href="articles/add">add</a></li>
<li class="sub-nav articles-sub-nav"><a href="articles/list">list</a></li>
<li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>

Answer 2

看起来您正在将整个元素传递给subMenu函数，因此您将无法在元素本身上调用lastIndexOf或substr
如果您在传递给subMenu函数的元素的属性上运行这些方法，那么它应该如您所期望的那样工作：

alert(e.href.substr(5));

或

alert(e.href.lastIndexOf("/"));

小提琴在这里：https://jsfiddle.net/25n1xbkc/

Answer 3

您可以使用.pathname获取URL的最后一部分(并替换/(：

alert(e.pathname.replace("/",""));

这是很好的阅读，不是吗

以及API 网站定位文档

function subMenu(e) {
alert(e.pathname.replace("/",""));
}
function jsDetect() {
var subs = document.getElementsByClassName('sub-nav');
for (var i = 0; i < subs.length; ++i) {
var item = subs[i];
item.classList.add('hide');
}
const divs = document.querySelectorAll('.sub-link');
divs.forEach(el => el.addEventListener('click', function(r) {
r.preventDefault();
subMenu(el);
}), false);
}
window.onload = jsDetect;

ul.nav {
text-transform: uppercase;
background: rgba(0, 0, 0, 1);
color: white;
}
ul.nav a:link {
color: white;
text-decoration: none;
display: block;
padding: 0.3em;
}
ul.nav,
ul.nav li {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.nav li {
padding: 0.55em;
}
.main-nav {
font-weight: bold;
font-family: 'Source Sans Pro Black', sans-serif;
border-top: 1px solid white;
}
.sub-nav {
background: rgba(255, 255, 255, 0.1);
}
.sub-nav a:hover {
background: rgba(255, 255, 255, 0.3);
}
.sub-nav.hide {
display: none;
}
.sub-nav.show {
display: block
}

<ul class="nav">
<li class="main-nav" id="home-nav"><a href="home">home</a></li>
<li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="food/add">add</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="food/list">list</a></li>
<li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="articles/add">add</a></li>
<li class="sub-nav articles-sub-nav hide"><a href="articles/list">list</a></li>
<li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>