javascript - 重构 javascript 'for' 循环

Question

我正在练习我的 JavaScript。我创建了一个链接来显示隐藏段落。该代码当前使用 2 个“for”循环。我应该以某种方式为“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)

Answer 1

由于在初始化段落列表时，toggle('hide') 也会执行与 add('hide') 相同的操作，因此最好将重复的代码提取到单个函数中。

例如:

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)