एक स्क्रिप्ट में एकाधिक डिव छुपाएं/दिखाएं

Question

मैं एक जेएस नोब हूं और अपनी वेबसाइट के लिए कुछ कोड करने की कोशिश कर रहा हूं। मैं divs onclick को छिपाना/दिखाना चाहता हूं, जिसे मैं बिना किसी समस्या के करने में सक्षम हूं, लेकिन एक बार जब मैं इसे फिर से करना चाहता हूं तो मुझे हर उस div के लिए स्क्रिप्ट को दोहराना होगा जिसे मैं छिपाना चाहता हूं ... क्या कोई मुझे इसे ठीक करने में मदद कर सकता है स्क्रिप्ट ताकि मुझे केवल एक बार इसकी आवश्यकता हो? शायद एक चर या कुछ का उपयोग कर रहे हैं? मैं वास्तव में जेएस के लिए नया हूं और वास्तव में मदद की सराहना करता हूं!

यहाँ स्क्रिप्ट का एक उदाहरण है:

<script>
    function hideShowDiv1() {
  var x = document.getElementById("hideShowDiv1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

javascript hide show

0

Matt Osborne 26 जिंदा 2022, 19:05

अपने फ़ंक्शन में div नाम में क्यों न पास करें

–

dontay

26 जिंदा 2022, 19:14

Answer 1

कक्षाओं का उपयोग आईडी का नहीं - क्योंकि एचटीएमएल में एक ही आईडी वाला केवल एक तत्व हो सकता है लेकिन एक ही कक्षा वाले कई तत्व हो सकते हैं। यहां काम करने वाले कोड का सरल उदाहरण है।

एचटीएमएल:

<div class="a">Test 1</div>
<div class="a">Test 2</div>

जावास्क्रिप्ट:

const toggle = () => {
  Array.from(document.getElementsByClassName('a')).forEach(e => {
    console.log('e', e.style.display, (e.style.display === 'none'))
    e.style.display = (e.style.display === 'none') ? 'block' : 'none'
  })
}

0

zbyso 26 जिंदा 2022, 19:16

Answer 2

मैं आपको इसके लिए सीएसएस कक्षाओं का उपयोग करने की सलाह दूंगा।

आप नीचे दिए गए स्निपेट को सीधे चला सकते हैं:

function toggleVisibility(e) {
  const targets = document.querySelectorAll('.target');
  targets.forEach(target => {
    if (target.style.display === 'none') {
      target.style.display = 'block';
    } else {
      target.style.display = 'none';
    }
  });
}

.target {
  width: 100px;
  height: 100px;
  background: blue;
  border: 1px solid black;
  display: block;
}

<button class="toggle" onclick="toggleVisibility()">Toggle</button>

<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>

0

Alex Gru 26 जिंदा 2022, 19:20

Answer 3

यह इस बात पर निर्भर करता है कि आप जिस तत्व को एक्सेस करने का प्रयास कर रहे हैं वह कैसा दिखता है। उदाहरण के लिए आप इसमें सामान्य वर्ग जोड़ सकते हैं और इस वर्ग के नाम के आधार पर उनसे पूछ सकते हैं

const allElements = document.querySelectorAll(".commonClassName");

allElements.forEach(element => {
  element.style.display = (element.style.display === "none")
    ? "block"
    : "none"
})

आप इस पेज पर querySelectorAll का उपयोग करके और उदाहरण पा सकते हैं https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

0

Bastien 26 जिंदा 2022, 19:29

एक स्क्रिप्ट में एकाधिक डिव छुपाएं/दिखाएं

3 जवाब

संबंधित सवाल

नए सवाल