Question

好的，我希望你看到这个时并不是所有的人 - 我仍然在寻找javascript。

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

我希望访客能够将他们的名字添加到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); 
});

Answer 2

function nextGuest () {
    for(var i = 0; i < 5; i++){
        document.getElementsByTagName('fieldset')[i]
                .getElementsByTagName('a')[0]
                .addEventListener('click',function(){ 
                       showNextGuest(parseInt(i + 1));
                 }, false);
    }
}

Answer 3

本杰明上面给出的答案是最好的，所以我接受了它。

尽管如此，为了完整起见，我想展示我最终使用的（更简单，更不优雅）解决方案，以便未来的读者可以比较和对比问题中的代码和下面的代码： / p>

<script>
var initiateShowNextGuest = [];

function showNextGuest(j) {
    document.getElementsByTagName('fieldset')[j].style.display = 'block';
}

function initiateShowNextGuestFunction(i) {
    return function() {
        var j = i + 1;
        document.getElementsByTagName('fieldset')[i].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(j);},false);
    };
}

function initiateShowNextGuests() {
    for (var i = 0; i < 5; i++) {
        initiateShowNextGuest[i] = initiateShowNextGuestFunction(i);
        initiateShowNextGuest[i]();
    }
}

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

总之，函数initiateShowNextGuests()循环（然后执行）initiateShowNextGuestFunction(i) 5次，设置5个匿名函数，这些函数在原始问题的代码中手动写出，同时避免了闭环问题。

用重复相似的行简化javascript函数（带循环？）

3 个答案: