我可以在for循环中执行“onClick”函数吗？

问题描述 投票：0回答：5

我制作了 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 循环缩短此代码行吗？

javascript onclick
5个回答
1
投票

是的，你可以做得更容易：

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

处理此问题的最佳方法是通过事件委托：将 

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>

0
投票

如果您在每个 

img
元素上设置自定义属性（如 
data-img-index
），那么您可以在每个类名上设置值为 card 的单击事件。最后获取 
id
和自定义属性值，即 
data-img-index
像这样传递你的 
openCard(id, attr);
方法

ID：

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

自定义属性： 

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>

0
投票

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

然后，处理程序可以查看原始的“目标”元素，以准确找出要传递给 opencard() 函数的参数。您可以将参数值放在该元素上的某个位置（可能在属性中，因此您可以使用 getAttribute() 获取它们），或者您的处理程序可能能够计算它们。在您的示例中，您可以通过获取目标元素的 ID 并将“c”更改为“i”来计算第一个参数，并通过一些算术计算第二个参数。

0
投票
您可以自动生成 HTML 和 JavaScript。

我在示例中使用了 jQuery，但您也可以使用纯 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 going to get inserted -->
</ul>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.