मुझे एक समस्या है। मैं क्लिक पर divs की अस्पष्टता को चालू करने का प्रयास कर रहा हूं। मैंने निम्नलिखित कोड की कोशिश की, लेकिन जब मैं एक div पर क्लिक करता हूं तो कुछ नहीं होता है:

let divFlags = document.getElementsByClassName("flags");
let flags = divFlags.getElementsByTagName("div");

for (let i = 0; i < flags.length; i++) {
    flags[i].addEventListener("click", function() {
    
    if (flags[i].classList.contains("active")) {
        flags[i].classList.remove("active");
    }
    else {
    flags[i].classList.add("active");
    }
  });
}
.flags {
    display: inline-block;
}

.flags .flag {
    display: inline-block;
    padding: 10px;
    opacity: 0.3;
}

.flags .flag:hover {
    cursor: pointer;
}

.flags .flag > div.active {
    opacity: 1;
}
<div class="flags">
    <div class="flag" >
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
</div>

मुझे त्रुटि दिखाई दे रही है: Uncaught TypeError: divFlags.getElementsByTagName is not a function

पीएस: यह महत्वपूर्ण है कि एकाधिक divs सक्रिय हो सकते हैं। सिर्फ एक नहीं!

मेरे द्वारा यह कैसे किया जा सकता है?

-2
A. Vreeswijk 30 अक्टूबर 2020, 13:46

3 जवाब

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

संक्षिप्त उत्तर: आपने document.getElementsByTagName का उपयोग किया। document.querySelectorAll का उपयोग करना इसे ठीक करता प्रतीत होता है।

मैंने if .. else को भी flag.classList.toggle('active') में बदल दिया।

let divFlags = document.querySelector(".flags");
let flags = divFlags.querySelectorAll(".flag");

flags.forEach(flag => {
  flag.addEventListener('click', e => {
    flag.classList.toggle('active');
  })
})
.flags {
    display: inline-block;
}

.flags .flag {
    display: inline-block;
    padding: 10px;
    opacity: 0.3;
}

.flags .flag.active {
  opacity: 1;
}

.flag img {
  height: 100px;
}

.flags .flag:hover {
    cursor: pointer;
}

.flags .flag > div.active {
    opacity: 1;
}
<div class="flags">
    <div class="flag" >
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
</div>
2
barhatsor 30 अक्टूबर 2020, 13:54
  • document.getElementsByTagName तत्वों का एक संग्रह देता है ताकि प्रत्येक तत्व से चाइल्ड डिव प्राप्त करने के लिए, आपको तत्वों के संग्रह को फॉलो स्निपेट के रूप में लूप करना होगा।
  • .flags .flag > div.active div चयनकर्ता को .flag चयनकर्ता के अंदर इंगित करता है लेकिन Javascript कोड से, .active वर्ग को .flag चयनकर्ता पर टॉगल किया जाता है ताकि इसे .flags .flag.active में बदल दिया जाए।
let divFlags = document.getElementsByClassName("flags");

for (let j = 0; j < divFlags.length; j ++) {
  let flags = divFlags[j].getElementsByTagName("div");
  for (let i = 0; i < flags.length; i++) {
    flags[i].addEventListener("click", function() {
      if (flags[i].classList.contains("active")) {
        flags[i].classList.remove("active");
      } else {
        flags[i].classList.add("active");
      }
    });
  }
}
.flags {
    display: inline-block;
}

.flags .flag {
    display: inline-block;
    padding: 10px;
    opacity: 0.3;
}

.flags .flag:hover {
    cursor: pointer;
}

.flags .flag.active {
    opacity: 1;
}
<div class="flags">
    <div class="flag" >
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
    <div class="flag">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
    </div>
</div>
0
Derek Wang 30 अक्टूबर 2020, 13:52

अधिक सरल, आप querySelectorAll बच्चे के साथ div का उपयोग कर सकते हैं और श्रोताओं को जोड़कर कक्षा को टॉगल कर सकते हैं

const divs = document.querySelectorAll('.flags div')
for (const div of divs) {
  div.addEventListener('click', () => {
    div.classList.toggle('active')
  })
}
.flags div {
  cursor: pointer;
  border: 1px solid red;
  padding: 1rem;
  opacity: 0.3;
  width: 10rem;
}

.flags div.active {
  opacity: 1;
}
<div class="flags">
  <div>First Div</div>
  <div>Second Div</div>
  <div>Thrid Div</div>
</div>
0
Naren 30 अक्टूबर 2020, 14:04