मैं एक ही फ़ंक्शन का उपयोग करके अलग-अलग divs को अलग-अलग टॉगल करना चाहता हूं। इनमें से प्रत्येक div में एक सामान्य वर्ग और एक अलग आईडी है। फ़ंक्शन toggle को दो अलग-अलग <a> तत्वों पर ऑनक्लिक पैरामीटर का उपयोग करके कहा जाता है:

<a class="btn" id="btnOne" onclick="toggler();">Show/hide divOne</a>
<div class="box" id="divOne">

<a class="btn" id="btnTwo" onclick="toggler();">Show/hide divTwo</a>
<div class="box" id="divTwo">

मैंने पहली बार इन divs को getElementsByClassName के साथ प्राप्त करने का प्रयास किया, लेकिन जैसा कि यह एक HTMLCollection देता है, स्क्रिप्ट प्रत्येक div को व्यक्तिगत रूप से लक्षित नहीं कर सकती है।

इसलिए मैंने <a> टैग आईडी (btnOne और btnTwo) का चयन करने की कोशिश की, लेकिन यह पता नहीं लगा सका कि इन आईडी का उपयोग करके divs वर्ग को कैसे पुनर्प्राप्त किया जाए (जैसा कि हम यहां दो अलग-अलग तत्वों के बारे में बात कर रहे हैं)।

अंत में, मैं getElementById विधि पर वापस आया, क्योंकि मैं यह नहीं समझ सका कि उनकी कक्षा के आधार पर उनका चयन कैसे किया जाए:

function toggler() {
    var id = document.getElementById("divId");
    if (id.style.display === "none") {
        id.style.display = "block";
    } else {
        id.style.display = "none";
    }
};

यह मुझे सिर्फ एक के बजाय दो कार्यों के साथ छोड़ देता है। दो divs को अलग-अलग लक्षित करने के बारे में कोई सुझाव?

-2
Maasha Theytaz 17 अक्टूबर 2018, 15:21

4 जवाब

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

आप nextElementSibling का उपयोग करके अगले भाई-बहन तक पहुंच सकते हैं, यह मानते हुए कि बॉक्स हमेशा हाइपरलिंक के ठीक बाद होगा।

// Put the buttons into an array
const buttons = [...document.getElementsByClassName("btn")];
// Assing an event listener for every button
buttons.map(button => button.addEventListener("click", function(e) {
  // Find the next sibling
  const box = e.target.nextElementSibling;
  // Toggle the display value
  if (box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
}));
a {
  display: block;
}

.box {
  width: 5rem;
  height: 2rem;
  background-color: blue;
}
<a class="btn">Show/hide divOne</a>
<div class="box"></div>

<a class="btn">Show/hide divTwo</a>
<div class="box"></div>
1
Gerard 17 अक्टूबर 2018, 13:09

एंकर आईडी से 'बीटीएन' निकालने के बाद शब्द प्राप्त करने के लिए सबस्ट्र का उपयोग करें जिसके परिणामस्वरूप एक या दो परिणाम होंगे, यदि "div" + शब्द का उपयोग करते समय यह div प्राप्त करेगा, तो यह एक टैग से संबंधित है

function toggler() {
    var word=this.id.substr(3);
    var id = document.getElementById("div"+word);
    if (id.style.display === "none") {
    id.style.display = "block";
    } else {
    id.style.display = "none";
    }
};
0
Osama 17 अक्टूबर 2018, 12:33

उनके वर्ग के नाम के साथ divs का चयन करने का एक आसान तरीका है और आप इसे पहले ही इस्तेमाल कर चुके हैं। उत्तर getElementsByClassName है। लेकिन वेनिला जेएस में चीजें थोड़ी (अधिक) जटिल होती हैं।
यह दोनों divs को अलग-अलग लक्षित नहीं करेगा। इसके बजाय, यदि आप इस वर्ग के साथ पहले div का चयन करना चाहते हैं तो आप इसे इस तरह करेंगे:

getElementsByClassName('classname')[0]

यदि आप दूसरे डिव का चयन करना चाहते हैं तो आप इसका उपयोग करेंगे:

getElementsByClassName('classname')[1]

और इसी तरह। लेकिन एक तरीका जरूर है।
आप लूप का उपयोग करना चाहते हैं:

var x = document.getElementsByClassName("classname");
for (var i = 0; i < x.length; i++) {
   if (x[i].style.display === "none") {
      x[i].style.display = "block";
   } else {
      x[i].style.display = "none";
   }
}

इस तरह, आप इस वर्ग के सभी divs को लक्षित करेंगे।

1
Aaron3219 17 अक्टूबर 2018, 12:32

मैं गतिशील रूप से स्विच पर घटनाओं को उनकी कक्षाओं का उपयोग करके जोड़ूंगा। मैंने उनमें showHideDivBtn कक्षा जोड़ी। यह सुनिश्चित करने के लिए कि आपको पता है कि आपको किस डिव को टॉगल करना है, मैंने एक data-id का उपयोग किया।

AddEventListener के साथ, मैं e नाम के इवेंट वेरिएबल का उपयोग कर सकता हूं। इसके साथ, मेरे पास संपत्तियों तक पहुंच है, जैसे कि data-id मैंने लिखा था।

let buttons = document.getElementsByClassName("showHideDivBtn");
for (let i = 0; i < buttons.length; ++i)
{
    buttons[i].addEventListener('click', function(e)
    {
        let divToToggle = document.getElementById(e.srcElement.dataset.id);
        if (divToToggle.style.display === "none")
            divToToggle.style.display = "block";
        else
            divToToggle.style.display = "none";
    });
}
<a class="btn showHideDivBtn" data-id="divOne" id="btnOne">Show/hide divOne</a>
<div class="box" id="divOne">One</div>
<br />
<a class="btn showHideDivBtn" data-id="divTwo" id="btnTwo">Show/hide divTwo</a>
<div class="box" id="divTwo">Two</div>
1
Cid 17 अक्टूबर 2018, 13:50