重構javascript'for'循環

我正在練習我的javascript。我創建了一個顯示隱藏段落的鏈接。該代碼當前使用2'for'循環。我應該以某種方式爲'for'循環創建一個函數，然後重新使用該函數？重構javascript'for'循環

var paragraphs = document.getElementsByTagName('p'), 
    firstParagraph = paragraphs[0], 
    link = document.createElement('a'); 
link.innerHTML = 'Show more'; 
link.setAttribute('class', 'link'); 
link.setAttribute('href', '#'); 
firstParagraph.appendChild(link); 

for (var i = 1; i <= paragraphs.length - 1; i++) { 
    paragraphs[i].classList.add('hide') 
} 

function toggleHide(e) { 
    e.preventDefault; 
    var paragraphs = document.getElementsByTagName('p'); 
    for (i = 1; i <= paragraphs.length - 1; i++) { 
     paragraphs[i].classList.toggle('hide'); 
    } 
} 

link.addEventListener('click', toggleHide)

來源

2017-02-27 James

這是在什麼時候它變得值得的，特別是因爲在這種情況下，他們做的稍微不同的東西見仁見智。 –

什麼不是意見問題（我不認爲）是你應該可以格式化和縮進你的代碼。 :-) –

由於切換（「隱藏」）也將做加法的同樣的事情（「隱藏」）初始化段列表時，這是很好的重複代碼拉至一個單一的功能。

例如：

var paragraphs = document.getElementsByTagName('p'), 
firstParagraph = paragraphs[0], 
link = document.createElement('a'); 
link.innerHTML = 'Show more'; 
link.setAttribute('class' , 'link'); 
link.setAttribute('href' , '#'); 
firstParagraph.appendChild(link); 
toggleHideAll(); 

function toggleHide(e){ 
    e.preventDefault; 
    var paragraphs = document.getElementsByTagName('p'); 
    toggleHideAll(); 
} 

function toggleHideAll(){ 
    for(i = 1 ; i <= paragraphs.length-1 ; i++){ 
     paragraphs[i].classList.toggle('hide'); 
    } 
} 

link.addEventListener('click' , toggleHide)

來源

2017-02-27 08:31:10

非常感謝您的澄清。非常感謝 – James

是，單迴路實現這兩個目標將是一件好事，因爲@Solmon說：

function toggleHideAll(){ 
    for (var i = 1; i <= paragraphs.length-1; i++) { 
     paragraphs[i].classList.toggle('hide'); 
    } 
}

還有就是要表達這樣一個更習慣的方法但是，我建議您使用它，因爲原始表單對於習慣於標準表單的開發人員來說很混亂：

function toggleHideAll() { 
    for (var i = 0; i < paragraphs.length; i++) { 
     paragraphs[i].classList.toggle('hide'); 
    } 
}

也就是說，循環從零開始，而循環變量是小於長度（不是小於或等於長度減1。在這種情況下，循環不會與原始文件完全相同，因爲原始文件實際上會跳過您的第一段。如果這是有意的，而不是調整環路參數，我建議切換所有段落，然後處理與外循環的代碼行的特殊情況：

function toggleHideAll() { 
    for (var i = 0; i < paragraphs.length; i++) { 
     paragraphs[i].classList.toggle('hide'); 
    } 
    paragraphs[0].classList.remove('hide'); 
}

此外，這是非常好的，當你能避免顯式循環在你的代碼乾脆：

function toggleHideAll() { 
    paragraphs.forEach(p => p.classList.toggle('hide')); 
    paragraphs[0].classList.remove('hide'); 
}

來源

2017-02-27 10:59:53

非常感謝您的解釋和您的時間。 – James

重構javascript'for'循環

回答

相關問題