Berikut adalah contoh pengaturan kelas aktif ke elemen yang dipilih. Ini adalah contoh yang bagus, tetapi ada masalah. Dalam contoh ada satu ID dan kelas turunannya, jadi saya mencoba menambahkan beberapa ID dan menyetel kelas yang berbeda masing-masing, agar hanya satu tombol yang dipilih untuk setiap ID DIV .

Jadi saya menulis kode ini; di sini saya menulis tiga potongan skrip - ya itu terlihat panjang, tetapi sebenarnya hanya potongan yang identik dengan ID dan kelas yang berbeda.

var header = document.getElementById("myDIV1");
var btns = header.getElementsByClassName("btn1");
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";
  });
}
var header = document.getElementById("myDIV2");
var btns = header.getElementsByClassName("btn2");
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";
  });
}
var header = document.getElementById("myDIV3");
var btns = header.getElementsByClassName("btn3");
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";
  });
}
.active, .btn:hover {
  background-color: #666;
  color: white;
}
id: myDIV1, class: btn1
<div id="myDIV1">
  <button class="btn1 active">1</button>
  <button class="btn1">2</button>
  <button class="btn1">3</button>
</div><br>

id: myDIV2, class: btn2
<div id="myDIV2">
  <button class="btn2 active">1</button>
  <button class="btn2">2</button>
  <button class="btn2">3</button>
</div><br>

id: myDIV3, class: btn3
<div id="myDIV3">
  <button class="btn3 active">1</button>
  <button class="btn3">2</button>
  <button class="btn3">3</button>
</div>

Jadi bagaimana saya bisa membuat hanya satu tombol 'aktif' per setiap DIV (seperti gambar sebelumnya), alih-alih menampilkan hasil seperti gambar terakhir?

1
Henry 7 Januari 2021, 17:15

3 jawaban

Jawaban Terbaik

Skrip Anda dapat sangat disederhanakan menggunakan delegasi acara. Pertama-tama hapus kelas active dari tombol di dalam div yang berisi, selanjutnya tambahkan kelas active ke tombol yang diklik. Tidak perlu jQuery, menurut saya.

document.addEventListener("click", handleBttns);
//       ^ one handler (event delegation)

function handleBttns(evt) {
  const origin = evt.target;

  if (origin.className.startsWith("btn")) {
    origin.closest("div").querySelectorAll("button.active")
      //     ^ the closest div of the clicked button
      .forEach(btn => btn.classList.remove("active"));
    // remove .active from all buttons within the div
    return origin.classList.add("active");
    // add .active to the clicked button
  }

  // reset all
  if (origin.id === "reset") {
    document.querySelectorAll("button.active")
      .forEach(btn => btn.classList.remove("active"));
    document.querySelectorAll("div > button:first-child")
      .forEach(btn => btn.classList.add("active"));
  }
}
.active {
  background-color: #666;
  color: white;
}
[id^=myDIV] > button:not(.active):hover {
  color: orange;
  background-color: #666;
}
id: myDIV1, class: btn1
<div id="myDIV1">
  <button class="btn1 active">1</button>
  <button class="btn1">2</button>
  <button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
  <button class="btn2 active">1</button>
  <button class="btn2">2</button>
  <button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
  <button class="btn3 active">1</button>
  <button class="btn3">2</button>
  <button class="btn3">3</button>
</div>

<p>
  <button id="reset">Reset all</button>
</p>
1
KooiInc 8 Januari 2021, 06:50

Karena Anda telah menandainya dengan jquery, saya akan memberikan solusi jquery.

$('div[id^=myDIV] button').click(function() {
  $(this).siblings().removeClass("active");
  $(this).addClass("active");
});

Demo

$('div[id^=myDIV] button').click(function() {
  $(this).siblings().removeClass("active");
  $(this).addClass("active");
});
.active,
.btn:hover {
  background-color: #666;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
id: myDIV1, class: btn1
<div id="myDIV1">
  <button class="btn1 active">1</button>
  <button class="btn1">2</button>
  <button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
  <button class="btn2 active">1</button>
  <button class="btn2">2</button>
  <button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
  <button class="btn3 active">1</button>
  <button class="btn3">2</button>
  <button class="btn3">3</button>
</div>
1
Carsten Løvbo Andersen 7 Januari 2021, 14:20

Anda bisa mendapatkan class di mana tombol diklik dan kemudian menghapus active dari tombol lain dengan kelas yang sama.

Kode Demo:

$("button").on('click', function() {
  var classs = $(this).attr('class') //get class
  $(this).addClass("active"); //add active
  $("." + classs).not(this).removeClass('active') //remove active clas from others

})
.active,
.btn:hover {
  background-color: #666;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
id: myDIV1, class: btn1
<div id="myDIV1">
  <button class="btn1 active">1</button>
  <button class="btn1">2</button>
  <button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
  <button class="btn2 active">1</button>
  <button class="btn2">2</button>
  <button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
  <button class="btn3 active">1</button>
  <button class="btn3">2</button>
  <button class="btn3">3</button>
</div>
1
Swati 7 Januari 2021, 14:22