gpt4 book ai didi

javascript - 编写更好的 JS

转载 作者:行者123 更新时间:2023-12-02 18:05:56 26 4
gpt4 key购买 nike

我正在尝试如何编写简单的 javascript 来完成与 jquery 中相同的操作。

我写这个是为了隐藏/显示子导航:

var i = 0;
var header = document.querySelector( 'header' ).childNodes;
for( i; i<=header.length-1; i++ ){
if( header[i].tagName !== undefined ){
var nav = header[i].childNodes;
for( i=0; i<=nav.length-1; i++ ){
if( nav[i].tagName !== undefined ){
if( nav[i].tagName === "MENU" ){
nav[i].className = "hide";
} else {
nav[i].onclick = function(){
var dest = this.attributes.href.nodeValue;
for( i=0; i<=nav.length-1; i++ ){
if( nav[i].className === "show" )
nav[i].className = "hide";
}
document.getElementById( dest.replace( "#", "" ) ).className = "show";
}
}
}
}
}
}

html 是:

<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
<menu id="home">
<a href="#">About</a>
<a href="#">Mission</a>
<a href="#">Blog</a>
</menu>
<menu id="work">
<a href="#">Web</a>
<a href="#">Print</a>
<a href="#">Media</a>
</menu>
<menu id="contact">
<a href="#">Info</a>
<a href="#">Sales</a>
<a href="#">Support</a>
</menu>
</nav>
</header>
</body>

使用一些CSS来显示:无或显示: block 用于.hide/.show

我的问题是“有更好的方法吗?”

此外,当我尝试将函数移到 .onclick 之外时,我无法使用“this”作为变量。

nav[i].onclick = showHide( nav );
function showHide( el ){
var dest = this.attributes.href.nodeValue;
for( i=0; i<=el.length-1; i++ ){
if( el[i].className === "show" )
el[i].className = "hide";
}
document.getElementById( dest.replace( "#", "" ) ).className = "show";
}

如何将被单击元素的变量传递为“this”?

最佳答案

您可以像这样使用 querySelector,然后迭代这些元素,而不是进行多次循环

var menu_s = document.querySelector('header > nav > menu');

var a_s = document.querySelector('header > nav > a'); //as is a key word

关于javascript - 编写更好的 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20107942/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com