'toggleClass` - 如何在兩個不同的``類名'之間切換'

Question

我想toggle 2個不同的類。 （A b），但我沒有得到結果。 我的代碼有什麼問題？

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div{ 
 
    height:20px; 
 
} 
 
.A{ 
 
    border:1px solid red; 
 
} 
 

 
.B{ 
 
    border:1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<button>Color Change</button>

Answer 1

給你的div一個 '啓動' 類。否則，將首先「切換上都」，下「切換都關閉」等

---

由於兩者都設定邊界，最後應用的類被使用，而另一個被忽略，所以因此你不會看到'紅色'邊框。

認爲它像在之間切換一個 class - on或off。如果你從開始沒有類，那麼按鈕將添加類（可以理解）。

如果您使用兩個類別進行切換，則應用相同的規則。你從開始都關閉，然後按鈕將切換都在 - 由於CSS的順序/ CSS的特殊性，第二個將覆蓋第一個CSS定義。

所以，爲了'切換'，你需要從'開'位置開始，一個在'關'位置。你去了！一旦按下按鈕，就會從開啓到關閉，反之亦然。

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div { 
 
    height: 20px; 
 
} 
 
.A { 
 
    border: 1px solid red; 
 
} 
 
.B { 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="A"></div> 
 
<button>Color Change</button>

Answer 2

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div{ 
 
    height:20px; 
 
} 
 
.A{ 
 
    border:1px solid red; 
 
} 
 

 
.B{ 
 
    border:1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="A"></div> 
 
<button>Color Change</button>

Answer 3

無需切換兩個類。您需要分配一個課程，您可以切換另一個課程。

HTML

<div class="A"></div> 
<button>Color Change</button> 

JQUERY

$('button').on('click', function() { 
    $('div').toggleClass("B"); 
}); 

CSS

div{ 
    height:20px; 
} 
.A{ 
    border:1px solid red; 
} 

.B{ 
    border:1px solid blue; 
} 

JSFIDDLE DEMO

如果你在這裏看到的邏輯很簡單。當您單擊該按鈕時，它會將名爲B的附加類添加到div中。一旦你點擊按鈕，你的div代碼就會變成這樣<div class="A B"></div>

所以在你的CSS中A和B的順序是很重要的。例如，如果您將B class移至A class的頂部，那麼您將無法獲得理想的結果。

不工作的CSS：

div{ 
    height:20px; 
} 
.B{ 
    border:1px solid blue; 
} 
.A{ 
    border:1px solid red; 
} 

否則，您可以使用關鍵字important，這樣就不會擔心秩序，但在實踐中並不好。