javascript - 我可以在 for 循环中执行 "onClick"函数吗？

Question

我制作了 html 页面，您可以在其中单击并通过 html 元素的 id 激活功能。我在 javascript 中花了很多行。我可以通过 for 循环缩短吗？

这是我的html代码:

<ul>    
    <li class="card" id="c0"><img id="i0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img id="i1" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img id="i2" src="images\idf.jpg"></li>
    <li class="card" id="c3"><img id="i3" src="images\idf.jpg"></li>
    <li class="card" id="c4"><img id="i4" src="images\jerusalem.jpg"></li>
    <li class="card" id="c5"><img id="i5" src="images\jerusalem.jpg"></li>
    <li class="card" id="c6"><img id="i6" src="images\sixDays.jpg"></li>
    <li class="card" id="c7"><img id="i7" src="images\sixDays.jpg"></li>
    <li class="card" id="c8"><img id="i8" src="images\BGurion.jpg"></li>
    <li class="card" id="c9"><img id="i9" src="images\BGurion.jpg"></li>
    <li class="card" id="c10"><img id="i10" src="images\hertzel.png"></li>
    <li class="card" id="c11"><img id="i11" src="images\hertzel.png"></li>
    <li class="card" id="c12"><img id="i12" src="images\vaizman.png"></li>
    <li class="card" id="c13"><img id="i13" src="images\vaizman.png"></li>
    <li class="card" id="c14"><img id="i14" src="images\menora.jpg"></li>
    <li class="card" id="c15"><img id="i15" src="images\menora.jpg"></li>
    <li class="card" id="c16"><img id="i16" src="images\knesset.jpg"></li>
    <li class="card" id="c17"><img id="i17" src="images\knesset.jpg"></li>

我用它在点击这个 javascript 代码时激活一个功能:

document.getElementById("c0").onclick = function(){openCard("i0",1)};
    document.getElementById("c1").onclick = function(){openCard("i1", 1)};
    document.getElementById("c2").onclick = function(){openCard("i2",2)};   
    document.getElementById("c3").onclick = function(){openCard("i3",2)};
    document.getElementById("c4").onclick = function(){openCard("i4",3)};
    document.getElementById("c5").onclick = function(){openCard("i5",3)};
    document.getElementById("c6").onclick = function(){openCard("i6",4)};
    document.getElementById("c7").onclick = function(){openCard("i7",4)};
    document.getElementById("c8").onclick = function(){openCard("i8",5)};
    document.getElementById("c9").onclick = function(){openCard("i9",5)};
    document.getElementById("c10").onclick = function(){openCard("i10",6)};
    document.getElementById("c11").onclick = function(){openCard("i11",6)};
    document.getElementById("c12").onclick = function(){openCard("i12",7)};
    document.getElementById("c13").onclick = function(){openCard("i13",7)};
    document.getElementById("c14").onclick = function(){openCard("i14",8)};
    document.getElementById("c15").onclick = function(){openCard("i15",8)};
    document.getElementById("c16").onclick = function(){openCard("i16",9)};
    document.getElementById("c17").onclick = function(){openCard("i17",9)};

我可以用 for 循环缩短这段代码行吗？

Answer 1

是的，您可以更轻松地做到这一点:

for(var i = 0;i <= 17;i++){
    document.getElementById("c" + i).onclick = function(){
        openCard("i" + i, Math.floor(i / 2) + 1);
    };
}