我可以在for循环中执行“onClick”功能吗？

Question

我制作了html页面，你点击并通过html-element的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);
    };
}

Answer 2

处理此问题的最佳方法是通过事件委派：click上的隐藏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>

然后只有一个处理程序：

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

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

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

直播示例：

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

function openCard(card, index) {
  console.log("card = " + card + ", index = " + index);
}

<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>

实际上，再看一下标记，你根本不需要data-card;它是img的父元素，所以：

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

和

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

...您要更改openCard，因此它需要元素本身，而不是id。

实例：

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

function openCard(element, index) {
  // use `element` and `index` here, the following code is just for the demo:
  element.appendChild(document.createTextNode(" opened, index = " + index));
}

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

Answer 3

您可以自动生成html和javascript。

我在我的示例中使用了jquery但您可以在plain javascript中实现此目的。

祝你好运！

// Generate your html
// Only specify the pictures you want to display
// The pictures are the only differences you have on your <li>
const data = [
  'images\westren_wall.jpg',
  'image2',
  'image3',
  'image4',
  'image5',
].map((x, xi) => `<li class="card" id="c${xi}"><img id="i${xi}" src="${x}"></li>`);

// Insert it into the page at the right position
$("#myData").html(data);

// trigger the clicks for each <li> having the card class
$('.card').each(function(x) {
  $(this).click(function() {
    // It will say hi when you i'll click on a <li>!
    console.log(`Hi i'm number ${this.getAttribute('id')}`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="myData">
   <!-- Where the <li> are gonna get inserted -->
</ul>

Answer 4

是的，您可以编写一个循环来附加所有这些处理程序。但是，在包含所有 li 的 ul 上放置一个onclick处理程序会更容易。当点击发生时，Javascript将在祖先元素列表中一直查找处理程序（还有更多内容，但目前还非常接近）。

然后，处理程序可以查看原始＆＃34;目标＆＃34; element，确切地指出要传递给opencard（）函数的参数。您可以将参数值放在该元素的某个位置（可能在属性中，因此您可以使用getAttribute（）获取它们），或者您的处理程序可能只能计算它们。在您的示例中，您可以通过获取目标元素的ID并更改＆＃34; c＆＃34;来计算第一个参数。 to＆＃34; i＆＃34;），第二个参数用一点算法。

Answer 5

如果您在每个img元素上设置自定义属性，例如data-img-index，则可以在每个类名上设置值为卡的点击事件。最后获取id和自定义属性值，即data-img-index，就像这样传递openCard(id, attr);方法

ID： var id = this.children[0].id;

自定义Attr： var attr = this.children[0].attributes['data-img-index'].nodeValue;

var classname = document.getElementsByClassName("card");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', function() {
    var id = this.children[0].id;
    var attr = this.children[0].attributes['data-img-index'].nodeValue;
    openCard(id, attr);
  });
}

function openCard(id, num) {
  console.log(id, num)
}

<html>

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

</html>