entityMap|blocks|key|ftsml|text|你可以用class代替id来做onclick|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|a2f36|​|2rbms|let+doorImage+=+document.querySelectorAll('.doors')+//select+all+the+elem+that+name+of+doors
const+botDoorPath+=+"new-url"

doorImage.forEach(elem+=>+elem.addEventListener('click',+()+=>+{+//loop+the+elem+and+assign+the+click+event
++elem.src+=+botDoorPath;
++console.log(elem)
}))|code-block|syntax|javascript|6sp3r|<img+class="doors"+id="1"+src="3">
<img+class="doors"+id="2"++src="3">
<img+class="doors"+id="3"++src="3">|6bbrl|a4947^0|4|5|B|2|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@$A|S|B|T|C|D]|$A|U|B|V|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|W|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|X|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|K|8|Y|9|@]|E|@]|F|$L|M]]|$2|P|4|H|6|7|8|Z|9|@]|E|@]|F|$]]|$2|Q|4|-4|6|7|8|10|9|@]|E|@]|F|$]]]]

<p>You could do onclick with <code>class</code> instead of <code>id</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let doorImage = document.querySelectorAll('.doors') //select all the elem that name of doors
const botDoorPath = "new-url"

doorImage.forEach(elem =&gt; elem.addEventListener('click', () =&gt; { //loop the elem and assign the click event
  elem.src = botDoorPath;
  console.log(elem)
}))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="doors" id="1" src="3"&gt;
&lt;img class="doors" id="2"  src="3"&gt;
&lt;img class="doors" id="3"  src="3"&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|6lg7k|text|您还可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7njll|​|7ukt0|const+botDoorPath+=+"new-url"

document.querySelectorAll('#door1,+#door2,+#door3'+)
++++++++++.forEach(imgElm=>{
++++++++++++imgElm.onclick=()=>
++++++++++++++{
++++++++++++++console.clear()+
++++++++++++++console.log('img+clicked+=',+imgElm.id+)
++++++++++++++imgElm.src+=+botDoorPath
++++++++++++++}
++++++++++})|code-block|syntax|javascript|bsl2b|<img+id="door1"+src="xxxx">
<img+id="door2"+src="yyyy">
<img+id="door3"+src="zzzz">|11dr9|76jmf^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|L|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|M|4|-4|6|7|8|S|9|@]|A|@]|B|$]]]]

<p>you can also do:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const botDoorPath = "new-url"

document.querySelectorAll('#door1, #door2, #door3' )
          .forEach(imgElm=&gt;{
            imgElm.onclick=()=&gt;
              {
              console.clear() 
              console.log('img clicked =', imgElm.id )
              imgElm.src = botDoorPath
              }
          })</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="door1" src="xxxx"&gt;
&lt;img id="door2" src="yyyy"&gt;
&lt;img id="door3" src="zzzz"&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|frgrj|text|稍微更改一下代码，您可以向每个图像元素添加一个类，让我们称其为door，然后选择具有该类的所有元素并循环通过它以应用onclick函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|d5oq9|let+doorImages+=+document.querySelectorAll('.door')

const+botDoorPath+=+"new-url"

for+(let+i+=+0;+i+<+doorImages.length;+i%2B%2B){
++let+anImage+=+doorImages[i]
++anImage.onclick+=+()+=>+(
++++++anImage.src+=+botDoorPath
++++++)

}|code-block|syntax|javascript|ftd56^0|V|4|1M|7|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@$A|N|B|O|C|D]|$A|P|B|Q|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|R|9|@]|E|@]|F|$J|K]]|$2|L|4|-4|6|7|8|S|9|@]|E|@]|F|$]]]]

<p>Changing your code a bit, you can add a class to each image element, let's call it <code>door</code>, after doing this select all elements with that class and loop through it to apply the <code>onclick</code> function.</p>

<pre class="lang-js prettyprint-override"><code>let doorImages = document.querySelectorAll('.door')

const botDoorPath = "new-url"

for (let i = 0; i &lt; doorImages.length; i++){
  let anImage = doorImages[i]
  anImage.onclick = () =&gt; (
      anImage.src = botDoorPath
      )

}
</code></pre>


entityMap|blocks|key|3kj0d|text|您可以遍历所有图像的数组并执行操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1ra0a|let+doorImages+=+document.querySelectorAll('.door')

const+botDoorPath+=+"new-url"

for+(let+i+=+0;+i+<+doorImages.length;+i%2B%2B){
++let+image+=+doorImages[i]
++image.addEventListener('click',+()+=>+{
++image.src+=+botDoorPath
++console.clear()
++console.log(image)

}|code-block|syntax|javascript|9v5d9^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>You can loop through an array of all the images and perform the action:</p>

<pre><code>let doorImages = document.querySelectorAll('.door')

const botDoorPath = "new-url"

for (let i = 0; i &lt; doorImages.length; i++){
  let image = doorImages[i]
  image.addEventListener('click', () =&gt; {
  image.src = botDoorPath
  console.clear()
  console.log(image)

}
</code></pre>


entityMap|blocks|key|9rhmp|text|您可以查询所有图像并遍历它们|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2e8st|​|4337n|let+doorImgs+=+document.querySelectorAll('img')
const+botDoorPath+=+"new-url"

doorImgs.forEach(image+=>+image.addEventListener('click',+()+=>+{+
++image.src+=+botDoorPath;
++console.log(image)
}))|code-block|syntax|javascript|9mah2|<img+src="1">
<img+src="2">
<img+src="3">|fod6|45lde^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|L|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|M|4|-4|6|7|8|S|9|@]|A|@]|B|$]]]]

<p>You can query for all images and loop through them</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let doorImgs = document.querySelectorAll('img')
const botDoorPath = "new-url"

doorImgs.forEach(image =&gt; image.addEventListener('click', () =&gt; { 
  image.src = botDoorPath;
  console.log(image)
}))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="1"&gt;
&lt;img src="2"&gt;
&lt;img src="3"&gt;</code></pre>
</div>
</div>
</p>


<p>So I have three images and on clicking anyone of them should perform the same function, I would like to implement a function that reduces the length of my code at the moment. Here's an example of the codebase:</p>

<p>Js code:</p>

<pre class="lang-js prettyprint-override"><code>    let doorImage1 = document.getElementById('door1')
    let doorImage2 = document.getElementById('door2')
    let doorImage3 = document.getElementById('door3')

    const botDoorPath = "new-url"

    doorImage1.onclick = () =&gt; {
      doorImage1.src = botDoorPath
    }

    doorImage2.onclick = () =&gt; {
      doorImage2.src = botDoorPath
    }

    doorImage3.onclick = () =&gt; {
      doorImage3.src = botDoorPath
    }
</code></pre>


Is there a way to use a loop to perform an onclick function on multiple images?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 因此，我有三个图像，在单击它们中的任何一个都应该执行相同的函数时，我想实现一个函数，以减少我的代码长度。下面是代码库的一个示例： Js代码：     let doorImage1 = document.getElementById('door1')    let doorImage2 = document.getEl...

问有没有办法使用循环在多个图像上执行onclick功能？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法使用循环在多个图像上执行onclick功能？EN