使用 HTML 类目标的 Javascript 事件 - 1 Me - 0

Question

我正在尝试创建可折叠的 DIV，对单击的链接使用react。我找到了如何使用“下一步”来执行此操作，但我想将链接放在单独的区域中。我想出了这个有效的方法...... JSFiddle - Works

function navLink(classs) {
this.classs = classs; 
} 

var homeLink = new navLink(".content-home");
var aboutLink = new navLink(".content-about");
var contactLink = new navLink(".content-contact"); 
var lastOpen = null;


$('.home').click(function() {
 if(lastOpen !== null) {
     if(lastOpen === homeLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
 }
   $('.content-home').slideToggle('slow'); 
        lastOpen = homeLink; 
} 
); 


$('.about').click(function() {
if(lastOpen !== null) {
     if(lastOpen === aboutLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-about').slideToggle('slow'); 
        lastOpen = aboutLink; 
} 
);  

$('.contact').click(function() {
if(lastOpen !== null) {
     if(lastOpen === contactLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-contact').slideToggle('slow'); 
        lastOpen = contactLink; 
}
);​

我现在尝试创建相同的结果，但使用单个函数而不是每个链接一个函数。这就是我想出来的......

function navLink(contentClass, linkClass, linkId) {
this.contentClass = contentClass;
this.linkClass = linkClass;
this.linkId = linkId;
}

var navs = [];

navs[0] = new navLink(".content-home", "nav", "home");
navs[1] = new navLink(".content-about", "nav", "about");
navs[2] = new navLink(".content-contact", "nav", "contact");

var lastOpen = null;

$('.nav').click(function(event) {

//loop through link objects
var i;
for (i = 0; i < (navsLength + 1); i++) {

    //find link object that matches link clicked
    if (event.target.id === navs[i].linkId) {

        //if there is a window opened, close it 
        if (lastOpen !== null) {
            //unless it is the link that was clicked
            if (lastOpen === navs[i]) {
                return;
            } else {
                //close it
                $(lastOpen.contentClass).slideToggle('fast');
            }
        }

        //open the content that correlates to the link clicked
        $(navs[i].contentClass).slideToggle('slow');

        navs[i] = lastOpen;


    }
 }
 });​

JSFiddle - Doesn't Work

没有错误，所以我认为我做的完全错误。我现在使用 Javascript 才大约一周。我已经掌握了有关数组和 JQuery 事件的知识，并尝试将它们应用到这里。我想我还差得远呢想法？谢谢

Answer 1

您只是忘记定义 navsLength:

var navsLength=navs.length;

当然，当您使用 jQuery 时，您也可以将其替换为 $()​​.each 循环。

[更新]我更正的另外两个错误:

lastOpen=navs[i];

for(i=0; i < navsLength ; i++)

演示:http://jsfiddle.net/jMzPJ/4/