如何使用 javascript 在两个不同的类名之间切换显示

Question

我有四个过滤器按钮（我只想一次显示两个）所以我给了第一个按钮 .switch1 和第二个按钮 .switch2 。现在我有一个 'switch filter' 按钮，如果用户单击它应该将 .switch1 display:block 切换为 none 并且将 .switch2 display:none 切换为 block.

<div class="switch2">
   <label>Year</label>
   <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
      <option selected>2022</option>
      <option value="1">2021</option>
      <option value="2">2020</option>
      <option value="2">2019</option>
      <option value="2">2018</option>
      <option value="2">2017</option>
      <option value="2">2016</option>
   </select>
</div>
<div class="switch1">
   <label>From:</label>
   <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
</div>
</div>
<div class="month-select col-2">
   <div class="switch2">
      <label>Month</label>
      <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
         <option selected>January</option>
         <option value="1">February</option>
         <option value="2">March</option>
         <option value="2">April</option>
         <option value="2">May</option>
         <option value="2">June</option>
         <option value="2">July</option>
         <option value="2">August</option>
         <option value="2">September</option>
         <option value="2">October</option>
         <option value="2">November</option>
         <option value="2">December</option>
      </select>
   </div>
   <div class="switch1">
      <label>To:</label>
      <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
   </div>
</div>
<div class="ms-5 d-flex flex-column justify-content-end">
   <div class=""><button class="btn-dark px-3 py-1 filterbtn">Filter</button></div>
</div>

这是第一个和第二个按钮在我的网站中的外观截图 first buttons second buttons

Answer 1

您可以将隐藏的 class 赋予第一组，然后来回切换 class

let switchBtn = document.querySelector('button')
let switch1 = document.querySelectorAll('.switch1')
let switch2 = document.querySelectorAll('.switch2')

function switchFilters() {
  let array = [...switch1, ...switch2]
  for (i = 0; i < array.length; ++i) {
    array[i].classList.toggle('hidden')
  }
}

switchBtn.onclick = switchFilters

.hidden {
  display: none;
}

<div class="switch2 hidden">
  <label>Year</label>
  <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
    <option selected>2022</option>
    <option value="1">2021</option>
    <option value="2">2020</option>
    <option value="2">2019</option>
    <option value="2">2018</option>
    <option value="2">2017</option>
    <option value="2">2016</option>
  </select>
</div>

<div class="switch1">
  <label>From:</label>
  <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
</div>

<div class="month-select col-2">
  <div class="switch2 hidden">
    <label>Month</label>
    <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
      <option selected>January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="2">April</option>
      <option value="2">May</option>
      <option value="2">June</option>
      <option value="2">July</option>
      <option value="2">August</option>
      <option value="2">September</option>
      <option value="2">October</option>
      <option value="2">November</option>
      <option value="2">December</option>
    </select>
  </div>

  <div class="switch1">
    <label>To:</label>
    <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
  </div>

  <div class="ms-5 d-flex flex-column justify-content-end">
    <div class=""><button class="btn-dark px-3 py-1 filterbtn">Filter</button></div>
  </div>
</div>

Answer 2

let fb = document.querySelector('.filterbtn');
let s1 = document.querySelectorAll('.switch1');
let s2 = document.querySelectorAll('.switch2');

fb.addEventListener('click',function(){
    s1.forEach(el => {
        el.classList.toggle('switch');
    });
    s2.forEach(el => {
        el.classList.toggle('switch');
    });
});

.switch{
            display: none;
        }

<div class="switch2 switch">
   <label>Year</label>
   <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
      <option selected>2022</option>
      <option value="1">2021</option>
      <option value="2">2020</option>
      <option value="2">2019</option>
      <option value="2">2018</option>
      <option value="2">2017</option>
      <option value="2">2016</option>
   </select>
</div>
<div class="switch1">
   <label>From:</label>
   <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
</div>
</div>
<div class="month-select col-2">
   <div class="switch2 switch">
      <label>Month</label>
      <select class="px-3 py-1 form-select bg-btn" aria-label="Default select example" style="font-size: 14px;">
         <option selected>January</option>
         <option value="1">February</option>
         <option value="2">March</option>
         <option value="2">April</option>
         <option value="2">May</option>
         <option value="2">June</option>
         <option value="2">July</option>
         <option value="2">August</option>
         <option value="2">September</option>
         <option value="2">October</option>
         <option value="2">November</option>
         <option value="2">December</option>
      </select>
   </div>
   <div class="switch1">
      <label>To:</label>
      <input class="px-3 py-1 fr-to bg-btn" type="date" name="" id="" style="font-size: 14px;">
   </div>
</div>
<div class="ms-5 d-flex flex-column justify-content-end">
   <div class=""><button class="btn-dark px-3 py-1 filterbtn">Filter</button></div>
</div>

如何使用 javascript 在两个不同的类名之间切换显示

how to toggle display between two different classnames with javascript

javascript

html

css

toggle

web-frontend