यह सिर्फ एक उदाहरण है, लेकिन मान लें कि मेरे पास यह है:
<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 में अलग-अलग सामानों की खोज की लेकिन मुझे लगता है कि मुझे नहीं पता कि मैं वास्तव में क्या खोज रहा हूं।
किसी भी मदद या सिफारिशों की सराहना करें कि मुझे क्या देखना चाहिए
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 विधि
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))
);
उपरोक्त उत्तरों के अलावा, यदि 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))