Question

我正在试图看看我如何编写简单的javascript，它可以在jquery中执行相同的操作。

我为hide / show sub navigation写了这个：

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：none或display：阻止.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”传递？

Answer 1

你可以像这样使用querySelector，然后迭代这些元素而不是做很多循环

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

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

Answer 2

这与JavaScript无关，JQuery更多的是编码风格，这将使您的代码看起来更好，更专业。

尝试封装诸如添加类或删除类之类的操作并添加注释：

/**
* Adds a class to the given object
* @param object 
* @param className
**/ 
var addClass = function(object, className){
    //Validate if object exists 
    if(object){
        //Validate if is a html object
        if(object.parentNode){
            object.className += " " + className;
        }
    }
};

写得更好JS

2 个答案: