तो मेरे पास तीन छवियां हैं और उनमें से किसी को भी क्लिक करने पर एक ही कार्य करना चाहिए, मैं एक ऐसे फ़ंक्शन को कार्यान्वित करना चाहता हूं जो इस समय मेरे कोड की लंबाई को कम कर दे। कोडबेस का एक उदाहरण यहां दिया गया है:

जेएस कोड:

    let doorImage1 = document.getElementById('door1')
    let doorImage2 = document.getElementById('door2')
    let doorImage3 = document.getElementById('door3')

    const botDoorPath = "new-url"

    doorImage1.onclick = () => {
      doorImage1.src = botDoorPath
    }

    doorImage2.onclick = () => {
      doorImage2.src = botDoorPath
    }

    doorImage3.onclick = () => {
      doorImage3.src = botDoorPath
    }
1
user13561538 18 मई 2020, 06:11

4 जवाब

सबसे बढ़िया उत्तर

अपने कोड को थोड़ा बदलकर, आप प्रत्येक छवि तत्व में एक वर्ग जोड़ सकते हैं, इसे door कहते हैं, ऐसा करने के बाद उस वर्ग के सभी तत्वों का चयन करें और onclick फ़ंक्शन को लागू करने के लिए इसके माध्यम से लूप करें।

let doorImages = document.querySelectorAll('.door')

const botDoorPath = "new-url"

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

}
0
dqve 18 मई 2020, 06:20

आप id के बजाय class के साथ ऑनक्लिक कर सकते हैं

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)
}))
<img class="doors" id="1" src="3">
<img class="doors" id="2"  src="3">
<img class="doors" id="3"  src="3">
2
prasanth 18 मई 2020, 06:16

आप यह भी कर सकते हैं:

const botDoorPath = "new-url"

document.querySelectorAll('#door1, #door2, #door3' )
          .forEach(imgElm=>{
            imgElm.onclick=()=>
              {
              console.clear() 
              console.log('img clicked =', imgElm.id )
              imgElm.src = botDoorPath
              }
          })
<img id="door1" src="xxxx">
<img id="door2" src="yyyy">
<img id="door3" src="zzzz">
3
Mister Jojo 18 मई 2020, 06:34

आप सभी छवियों की एक सरणी के माध्यम से लूप कर सकते हैं और क्रिया कर सकते हैं:

let doorImages = document.querySelectorAll('.door')

const botDoorPath = "new-url"

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

}
2
Player1 18 मई 2020, 16:14