使用HTML類目標的Javascript事件 - 1 Me - 0

我正在嘗試創建對被點擊的鏈接作出反應的可摺疊的DIV。我發現如何使用「下一個」來做到這一點，但我想把鏈接放在一個單獨的區域。我想出了這個其中工程... JSFiddle - Works 使用HTML類目標的Javascript事件 - 1 Me - 0

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事件的知識，並嘗試在這裏應用它們。我假設我走了。思考？由於

來源

2012-12-05 SMDeConto

你忘記定義navsLength：

var navsLength=navs.length;

當然，你也可以用$（更換）每個循環爲你'使用jQuery。

[更新]另外兩個錯誤，我糾正：

lastOpen=navs[i]; 

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

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

來源

2012-12-05 22:35:56 Christophe

或者只是使用navs.length –

謝謝你們！尤里，我會嘗試，一旦我多做一點閱讀，並有一個更好的想法是什麼意思:) – SMDeConto

嘗試：

var current, show = function(){ 
    var id = this.id, 
     doShow = function() { 
      current = id; 
      $(".content-" + id).slideToggle('slow');   
     }, 
     toHide = current && ".content-" + current; 

    if(current === id){ //Same link. 
     return; 
    } 

    toHide ? $(toHide).slideToggle('fast', doShow): doShow();; 

}; 

$("#nav").on("click", ".nav", show);

http://jsfiddle.net/tarabyte/jMzPJ/5/

來源

2012-12-05 22:33:34

@Christophe。謝謝。更新我的代碼。 –

+1我的答案糾正錯誤，但實際上不需要循環。 – Christophe

使用HTML類目標的Javascript事件 - 1 Me - 0

回答

相關問題