यह सिर्फ एक उदाहरण है, लेकिन मान लें कि मेरे पास यह है:

<img class"clone" id="1" onClick="reply_click(this.id)">
<img class"clone" id="2" onClick="reply_click(this.id)">
<img class"clone" id="3" onClick="reply_click(this.id)">
..... x 100

<script type="text/javascript">
function reply_click(clicked_id)
{
    alert(clicked_id);
}
</script>

क्या "क्लोन" वर्ग के लिए केवल एक ऑनक्लिक बनाना संभव होगा और मुझे उस तत्व की आईडी लौटाएगा जिसे मैंने क्लिक किया था ताकि मैं इसे किसी फ़ंक्शन में उपयोग कर सकूं?

मेरे पास लगभग 100 छवियां हैं जिन्हें मैं विभिन्न आईडी के साथ उत्पन्न करूंगा।

तो स्वाभाविक रूप से अगर मुझे हर पंक्ति में onClick="reply_click(this.id) जोड़ना है तो यह बहुत दोहराव वाला कोड होगा।

तो मैं जो चाहता हूं वह होगा:

onClick -> any element with class clone -> return me the exact ID of the element clicked

मैंने जेएस और jQuery में अलग-अलग सामानों की खोज की लेकिन मुझे लगता है कि मुझे नहीं पता कि मैं वास्तव में क्या खोज रहा हूं।

किसी भी मदद या सिफारिशों की सराहना करें कि मुझे क्या देखना चाहिए

1
Blue Lovag 10 अक्टूबर 2020, 22:26

3 जवाब

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

आप कक्षा clone के साथ सभी तत्वों का चयन कर सकते हैं और उनमें से प्रत्येक के लिए एक ईवेंट श्रोता जोड़ सकते हैं:

const clones = document.querySelectorAll('.clone');

const divToCopyInto = document.querySelector(div);//get the div you want to copy into

clones.forEach((clone) => clone.addEventListener('click', (event) => {
    const newClone = clone.cloneNode(true); // or use event.target if you wish to clone the target which will probably be the image in this case
    divToCopyInto.appendChild(newClone);
}));

संपादित करें: टिप्पणियों के बाद, मैंने ईवेंट श्रोता के अंदर वांछित फ़ंक्शन जोड़ा।

आपको इसके बारे में नोट भी देखना चाहिए। cloneNode विधि

3
Saar Davidson 10 अक्टूबर 2020, 23:59

JQuery के साथ आप इसे इस तरह कर सकते हैं:

function reply_click(clicked_id)
{
   alert(clicked_id);
}
    
$('img.clone').on('click', function(event) {   
    reply_click(event.target.id);
});

वेनिला जेएस (ES6):

const images = document.getElementsByClassName('clone');
images.forEach((img) =>
  img.addEventListener('click', (event) => reply_click(event.target.id))
);
3
domenikk 10 अक्टूबर 2020, 23:16

उपरोक्त उत्तरों के अलावा, यदि img तत्व बाद में ठीक वैसे ही दिखाई देते हैं जैसे कि अन्य तत्वों के बिना प्रश्न में वर्णित है, तो आप उन्हें एक कंटेनर में भी लपेट सकते हैं और उस पर ईवेंट हैंडलर लागू कर सकते हैं।

<div id = "img-wrapper">
    <img class"clone" id="1">
    <img class"clone" id="2">
    <img class"clone" id="3">
    <!-- etc -->
</div>

इवेंट हैंडलर को img-wrapper पर लागू करें।

const imgWrapper = document.getElementById('img-wrapper');
imgWrapper.addEventListener('click', (event) => reply_click(event.target.id))

1
nibble 10 अक्टूबर 2020, 23:38