javascript - 使用重复的相似行(使用循环？)简化 JavaScript 函数

Question

好吧，我希望你们看到这个时不要捂着脸——我还在寻找 JavaScript 的方法。

我正在为婚礼网站整理一份回复表格。

我希望 guest 能够将自己的姓名添加到 RSVP 表单中，但仅显示所需数量的字段。为此，每个姓名字段后面都有一个可供单击的链接，单击该链接后，将显示下一位客人的姓名字段。

下面的代码可以工作......但我确信它可以更整洁。

我尝试以几种不同的方式将 for() 循环插入代码中，我可以看到 for() 循环正确地递增到最后一个值 - 但当它这样做时，它只留下最后一个 addEventListener地方。我只能假设，我应该使用不同类型的循环 - 或者完全不同的方法。

我应该如何整理以下内容？

<script>
function showNextGuest(i) {
document.getElementsByTagName(\'fieldset\')[i].style.display = \'block\';
}

function initiateShowNextGuest() {
        document.getElementsByTagName('fieldset')[0].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(1);},false);
        document.getElementsByTagName('fieldset')[1].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(2);},false);
        document.getElementsByTagName('fieldset')[2].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(3);},false);
        document.getElementsByTagName('fieldset')[3].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(4);},false);
        document.getElementsByTagName('fieldset')[4].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(5);},false);
}

window.onload = initiateShowNextGuest();
</script>

Answer 1

您的直觉是正确的 - for 循环确实可以简化它，查询选择器也可以:

var fieldsSet = document.querySelectorAll("fieldset"); // get all the field sets
var fieldss = [].slice.call(asSet); // convert the html selection to a JS array.
fields.map(function(field){
    return field.querySelector("a");  // get the first link for the field
}).forEach(function(link, i){
    // bind the event with the right index.
    link.addEventListener("click", showNextGuest.bind(null, i+1), false); 
});

这可以缩短为:

var links = document.querySelectorAll("fieldset a:first-of-type");
[].forEach.call(links, function(link, i){
     link.addEventListener("click", showNextGuest.bind(null, i+1), false); 
});