केवल जावास्क्रिप्ट का उपयोग करके, मैं पाँच नेस्टेड डिव बनाना चाहता हूँ। उनमें से किसी एक पर क्लिक करते समय, मैं चाहता हूं कि केवल उस div की पृष्ठभूमि अपना रंग बदल दे (रंगों की एक सरणी के अनुसार)।

यहां मेरी समस्या यह है कि, क्योंकि divs नेस्टेड हैं, उनमें से किसी एक पर क्लिक करने से केवल सबसे बड़ा (माता-पिता) रंग जाएगा। बाकी कोड ठीक है क्योंकि अगर मैं सीमा पर क्लिक करने के लिए संघर्ष करता हूं, तो मैं वास्तव में वह हासिल कर सकता हूं जो मैं चाहता हूं। लेकिन विचार छोटे div के अंदर क्लिक करते समय काम करना है।

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10 + 20)}px`
    currentDiv.style.height = `${(i * 10 + 20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}
1
Bianca 7 सितंबर 2020, 21:36

2 जवाब

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

प्रत्येक लूप, उसके माता-पिता से बड़ा एक DIV जोड़ा जाता है। इसका मतलब है कि केवल अंतिम डिव पर क्लिक किया जा सकता है क्योंकि यह दूसरों को कवर करता है।

यदि साइज़िंग लॉजिक को उलट दिया जाता है ताकि डीआईवी प्रत्येक लूप से छोटा हो जाए, तो कोड आपकी अपेक्षा के अनुरूप काम करेगा।

event.stopPropagation(); का उपयोग करके ईवेंट को अन्य तत्वों में बबलिंग से रोकने के लिए उपयोग करें।

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(60 - i * 10)}px`
    currentDiv.style.height = `${(60 - i * 10)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function(e) {
        e.stopPropagation();
        this.style.backgroundColor = colors [this.position]
    } 
}
div {
  outline: 1px solid orange;
  background: #FFF;
}
3
Turnip 7 सितंबर 2020, 22:11

आपको <कोड पर ईवेंट प्रचार रोकना चाहिए >ऑनक्लिक ईवेंट, जैसे कि

divArray[i].onclick = function(event) {
  event.stopPropagation();
  this.style.backgroundColor = colors [this.position]
}

डिफ़ॉल्ट व्यवहार को रोकने के लिए preventDefault भी है। , उदाहरण के लिए लिंक या फ़ॉर्म बटन की तरह।

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10 + 20)}px`
    currentDiv.style.height = `${(i * 10 + 20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}
div{
  border: 1px solid #000;
}
0
local dev 7 सितंबर 2020, 21:57