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

वर्तमान में मेरे पास जो कोड है वह उसी आईडी के नीचे किसी अन्य बटन पर क्लिक करके बटन का रंग बदल देगा, यह 'सक्रिय' नामक टैग जोड़कर और हटाकर ऐसा करता है। यह ठीक काम करता है लेकिन मुझे इसके साथ एक समस्या है मुझे बदलने में मदद चाहिए:

इसे काम करने के लिए बटनों में से एक के साथ शुरू करने के लिए 'सक्रिय' टैग होना चाहिए। मुझे यह पसंद है ताकि जब तक कोई बटन दबाया न जाए तब तक कोई भी बटन 'सक्रिय' न हो। (उदाहरण के लिए जब उपयोगकर्ता बटन देखता है तो वे सभी एक ही रंग के होते हैं, जब तक कि वे एक दबाते नहीं हैं)। एक बार दबाने के बाद कोड वर्तमान की तरह ही काम करता है।

अगर मैं जावास्क्रिप्ट से शुरू करने के लिए कोड से सक्रिय टैग को हटा देता हूं तो काम नहीं लगता है, और क्लिक करने पर बटन सक्रिय टैग प्राप्त नहीं करते हैं। मेरे द्वारा इसे कैसे बदला जा सकता है। यहाँ मेरा वर्तमान कोड है:

एचटीएमएल:

<div id="buttonscontainer">
  <div class="button active>Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div> 

सीएसएस:

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

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

<script>
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>
1
Alfie 16 सितंबर 2020, 16:06

5 जवाब

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

आपको बस एक चेक बनाना है कि क्या current[0] अपरिभाषित है या नहीं, यह ठीक काम करना चाहिए

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if(current[0] != undefined){
  current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}
<div id="buttonscontainer">
  <div class="button">Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div> 
1
Ramon de Vries 16 सितंबर 2020, 16:20

क्योंकि जब कोई सक्रिय वर्ग मौजूद नहीं होता है तो यह undefined लौटाता है। आप पहले सभी सक्रिय वर्ग को हटा सकते हैं फिर सक्रिय वर्ग को नए क्लिक किए गए बटन में जोड़ सकते हैं।

var header = document.getElementById("buttonscontainer");
var btns = header.querySelectorAll(".button");

btns.forEach( button => {
  //set click event
  button.addEventListener('click', function() {
    //remove all the active class from buttons
    btns.forEach( oldButton => {
      oldButton.classList.remove('active');
    });
    
    //append the active class to the new clicked button
    this.classList.add('active');
  })
})
.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}
<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div>
</div>
2
ChosenUser 16 सितंबर 2020, 16:24

आप सक्रिय कक्षा के निकट " दोहरे उद्धरणों से चूक गए

वह HTML में है

<div class="button active>Test1</div>

में परिवर्तन

<div class="button active">Test1</div>

चेक इन स्क्रिप्ट में वर्तमान चर मान है।

if(current.length){ ..... } // check if current having value
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
    if(current.length){
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    }
  });
}
.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}
Having Active button
<div id="buttonscontainer">
  <div class="button active">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>

Dosn't Have active button
<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>
1
Rayees AC 16 सितंबर 2020, 16:25

अपनी स्क्रिप्ट को इसमें बदलें:


<script>
  var header = document.getElementById("buttonscontainer");
  var btns = header.getElementsByClassName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (event) {
      var current = document.getElementsByClassName("active");
      if (current.length == 0) event.target.className += " active";
      else {
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      }
    });
  }
</script>

यदि कोई अन्य बटन इस समय सक्रिय नहीं है तो यह बटन को क्लिक पर सक्रिय कर देगा। तो यह शायद आपके उद्देश्य के लिए काम करेगा :)

0
Tadeo Hepperle 16 सितंबर 2020, 16:21

मैं आपको इस तरह की चीजों के लिए jQuery का उपयोग करने की दृढ़ता से अनुशंसा करता हूं। जांचें कि जेएस कोड कैसा दिखता है।

const setColor = (e) => {
  $('.button').removeClass('active')
  $(e.target).addClass('active')
}

$('.button').on('click', setColor);
.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>
0
Luis González 16 सितंबर 2020, 16:21