重构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'循环

回答

相关问题