如何使css類轉回到之前點擊css jquery

Question

所以我有一個<div>與藍色背景顏色，jQuery的onclick事件，該div的顏色更改爲紅色。我想知道如何才能讓div背景顏色變回藍色，當再次單擊按鈕時&如果再次點擊並且變成紅色，會變回紅色？

Answer 1

我不知道你是什麼正是意思點擊兩次，所以我爲你做了兩個可能的解決方案。

一箱變它的背景blue上一個點擊更改回black，點擊兩次（雙擊）時。

第二個盒子每次點擊都改變它的背景，一次是​​，一次是yellow。

var box = document.getElementById('box'), 
 
    box2 = document.getElementById('box2'), 
 
    bool = true; 
 
    
 
    box.addEventListener('click', function(){ 
 
     this.style.background = 'blue'; 
 
    }); 
 

 
    box.addEventListener('dblclick', function(){ 
 
     this.style.background = 'black'; 
 
    }); 
 

 
    box2.addEventListener('click', function(){ 
 
     if (bool) { 
 
     this.style.background = 'yellow'; 
 
     bool = false; 
 
     } else { 
 
     this.style.background = 'green'; 
 
     bool = true; 
 
     } 
 
    });

#box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: black; 
 
    margin: 5px; 
 
} 
 
#box2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    margin: 5px; 
 
}

<div id='box'></div> 
 
<div id='box2'></div>

Answer 2

您的gonig需要共享一些示例代碼來解決您的問題。但最常見的方式就是讓你的jQuery的onclick事件中使用類似的代碼檢查div的顏色：

var theColorIs = $('a').css("backgroundColor"); 

然後讓它改變基於顏色什麼顏色是目前

Answer 3

您可以使用將空字符串傳遞給jQuery中的.css，如.css('background-color', '');，以清除以前的值。

Answer 4

你需要這個。

$(".yourDiv").click(function() { 
    $(this).toggleClass("red"); 
}); 

你的CSS

.yourDiv{ background-color: #1E90FF; } 
.yourDiv.red { background-color:#FF0000; } 

Answer 5

jQuery有一個名爲toggleClass方法，非常適合這個。你還應該看看切換方法。

<style> 
.blue{ 
     background-color: blue; 
} 
.red{ 
     background-color: red; 
} 
</style> 

<div class="blue"> 
     .... 
</div> 

<script> 

$(".blue, .red").click(function() { 
    $(this).toggleClass("blue"); 
    $(this).toggleClass("red"); 
}); 
</script> 

p.s.即時在電話上打字

Answer 6

沒有必要的jQuery，所有你需要做的就是添加一些樣式到CSS類，並通過Vanilla JavaScript添加/刪除類。

let body = document.querySelector('body'), 
 
    box = document.querySelectorAll('.box'); 
 

 
body.addEventListener('click', function(e) { 
 
    let cl = e.target.classList; 
 
    if (cl.contains('box')) 
 
    cl.toggle('active'); 
 
});

.box { 
 
    background: blue; 
 
    display: inline-block; 
 
    margin:  5px; 
 
    height:  2.5rem; 
 
    width:  2.5rem; 
 
} 
 

 
.active { 
 
    background: red; 
 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

• 結合點擊事件（在這種情況下，體）的父元素。這是重要的，因爲不是創建5種單擊功能的瀏覽器來處理，也因爲點擊連接到體元素只有一個
• ，我們來看看事件的目標是點擊一下（實際上clickeD）是爲了確定它是否是一個盒子（或者只是一個物體）。我們可以通過檢查課程來確定它是否是一個盒子。
  如果您想進一步探索，請刪除if語句並重新運行代碼。然後點擊空白處。您會注意到，因爲我們沒有在尋找框，它會將活動的類添加到任何被單擊的元素。

對於更短的代碼，你可以刪除替換整個如果塊與cl.contains('box') && cl.toggle('active');，它說：「如果該元素有一個箱類，然後切換活躍類」