同一按鈕上的Javascript連續單擊事件以更改css

我想在復選框上創建一個單擊事件并添加一個 CSS 類。我可以使用“classList.toggle”通過單擊按鈕 2 次來添加和洗掉 CSS 類。這就是我想做的。當我單擊第一個復選框時，我想添加“xyz”類，當我單擊同一個復選框時，我想添加“abc”類并洗掉“xyz”類。

  const openModal = document.getElementById('mark-as-gift');
  const modalBg = document.querySelector('.addtnew');
  
  openModal.addEventListener('click', openModalBtn);
 
  function openModalBtn() {
     modalBg.classList.add('menscart2');
      
  }

這是我的 startet JS 代碼。謝謝您的幫助

uj5u.com熱心網友回復：

用于DOM.className.split(' ').indexOf(yourclassname)檢查類內部是否包含然后通過呼叫將其洗掉DOM.classList.remove(yourclassname)，例如：

const openModal = document.getElementById('mark-as-gift');
const modalBg = document.querySelector('.addtnew');
  
 openModal.addEventListener('click', openModalBtn);
 
 function openModalBtn() {
   if(modalBg.className.split(" ").indexOf("menscart2") >= 0) {
      modalBg.classList.remove('menscart2');
     } else {
      modalBg.classList.add('menscart2');
     }
   console.log(`Class name this element have: ${modalBg.className}`) 
  }

.menscart2 {
 width: 100px;
 height: 100px;
 background: blue;
}

<input id="mark-as-gift" type="checkbox" />
<div class="addtnew">Hello</div>

uj5u.com熱心網友回復：

您可以使用切換 DOM 方法，或者您可以使用布林值來檢查復選框是否被選中。點擊這里進入官方 MDN 檔案

我希望它有幫助:)

uj5u.com熱心網友回復：

const openModalBtn = document.querySelector("yourButton")
const modalBg = document.querySelector('.addtnew');
const classes = ["xyz", "abc"];
let toggled = false;

openModal.addEventListener('click', openModalBtn);

function openModalBtn() {
    modalBg.classList.add(classes[  toggled]);
    modalBg.classList.remove(classes[  !toggled]);
    toggled = !toggled;
}

uj5u.com熱心網友回復：

如果您可以更改您正在使用的類，那么只需切換單個類并使用:not(.class)它來選擇沒有該類的元素會更容易和更清晰。

const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal:not(.open) {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal">Modal</div>

如果你仍然需要兩個類，但你不關心“無效狀態”（元素沒有或兩個類），你可以這樣做：

顯示代碼片段

  const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
  modalBg.classList.toggle('closed');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal.closed {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal closed">Modal</div>

最后，如果你確實關心無效狀態，首先你必須想出一些關于如何處理它們的語意。

uj5u.com熱心網友回復：

或者您可以在.toggle()您classList的 .

const openModal = document.getElementById('mark-as-gift');
const modalBg=document.querySelector(".addtnew");
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
 modalBg.classList.toggle('red');
 modalBg.classList.toggle('green');
}

.green {color:Green}
.red {border: solid red 1px}

<button id="mark-as-gift">toggle classes</button>
<div class="addtnew green">This is the modal div.</div>

標籤：javascript html css

上一篇：用axios反應useEffect

下一篇：在組件中呼叫自定義React異步鉤子并再次查看它的狀態