Javascript “我能做什么？”；onClick"；for循环中的函数？

我制作了一个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>

---

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

是的，您可以用更简单的方法来完成：

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

---

for（var i=0；i处理此问题的最佳方法是通过事件委派：钩住
单击
ul
上的
，然后使用
e.target
引用所单击的特定
img
。存储该元素上所需的任何信息：

<ul id="list">    
    <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>

或者，如果您更喜欢
.onclick
（但没有理由这样做，除非您必须支持真正过时的浏览器，如IE8）：

实例：


document.getElementById（“列表”）.addEventListener（“单击”），函数（e）{
openCard（e.target.getAttribute（“数据卡”），+e.target.getAttribute（“数据索引”））；
});
功能openCard（卡片、索引）{
console.log（“card=“+card+”，index=“+index”）；
}




您可以自动生成HTML和JavaScript

我在我的示例中使用了jQuery，但您也可以在普通JavaScript中实现这一点


//生成您的html
//仅指定要显示的图片
//图片是您的
上唯一的差异
常数数据=[
'images\westren_wall.jpg'，
“图像2”，
“图像3”，
“图像4”，
“图像5”，
].map（（x，xi）=>`
`）；
//将其插入页面的正确位置
$（“#myData”）.html（数据）；
//触发具有卡类的每个
的点击
$（'.card'）。每个（函数（x）{
$（此）。单击（函数（）{
//当你点击一个
时，它会说你好！
log（`Hi i'm number${this.getAttribute（'id'）}`）；
});
})；


是的，您可以编写一个循环来附加所有这些处理程序。但是，只需在包含所有lis的ul上放置一个onclick处理程序就更容易了。当单击发生时，Javascript将在祖先元素列表的最上层查找处理程序（还有更多，但目前已经足够接近了）

然后，处理程序可以查看原始的“target”元素，以确定要传递给opencard（）函数的参数。您可以将参数值放在该元素的某个位置（可能在属性中，因此可以使用getAttribute（）获取它们），或者您的处理程序可以只计算它们。在您的示例中，您可以通过获取目标元素的ID并将“c”更改为“i”）来计算第一个参数，并通过一点算术运算来计算第二个参数。
如果您在每个
img
元素（如
数据img index
）上设置自定义属性，然后，您可以使用值卡在每个类名上设置单击事件。最后获得
id
和自定义属性值，即
数据img索引
，通过这种方式传递
openCard（id，attr）方法

Id:
var Id=this.children[0].Id

自定义属性：
var Attr=this.children[0]。属性['data-img-index']。节点值


var classname=document.getElementsByClassName（“卡片”）；
对于（var i=0；i






















为这些元素提供一个公共类，将单击绑定到该类，然后在调用opencard之前读取该事件的id，怎么样？
<ul id="list">    
    <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>

document.getElementById("list").addEventListener("click", function(e) {
    openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index"));
});

document.getElementById("list").onclick = function(e) {
    openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index"));
};