如何使用 Javascript 或 jquery 在樣式之間切換

Question

我有一個.ban2類和#banner2 .ban2 id 的 div。

每當我單擊 div 本身時，我都想更改此 div 的 border-radius 屬性。 就像我第一次點擊它時，border-radius 變為 0，當我再次點擊時，它又回到50% 0 0 50% 。

我想在這兩種樣式之間切換。 在我的.ban2Toggle類中，我包含了所有樣式，但邊框半徑為 0。

它只工作一次，就像我第一次單擊它時邊框半徑變為 0。下次我單擊它時，我不知道如何讓它恢復正常。

.banner .ban2{
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 63vh;
  background: #5a0980;
  border-radius: 50% 0 0 50%;
  transform: scaleY(1.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease;
}

$('#banner2').on('click', function(){
  $('#banner2').removeClass('ban2');
  $('#banner2').addClass('ban2Toggle');
});

Answer 1

對於jQuery ，您必須使用

$(element).toggleClass('className');

它會自動為您添加和刪除它。

對於JavaScript ，您必須使用

element.classList.toggle('className'); 

它會自動為您添加和刪除它。

示例代碼段（運行）

 $('#banner2').on('click', function() { $('#banner2').toggleClass('ban2Toggle'); });

 .banner .ban2 { position: absolute; right: 0; top: 0; width: 40%; height: 63vh; background: #5a0980; border-radius: 50% 0 0 50%; transform: scaleY(1.6); display: flex; justify-content: center; align-items: center; transition: 1s ease; } .banner .ban2.ban2Toggle { border-radius: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="banner"> <div id="banner2" class="ban2">Lorem Ipsum</div> </div>

Answer 2

按照BOZ 的回答，您需要這樣做：

html：

<div id="banner2" class="ban2"></div>

腳本：

$('#banner2').on('click', function(){
  $('#banner2').toggleClass('ban2');
  $('#banner2').toggleClass('ban2Toggle');
});

Answer 3

取一個命名flag=false的變量； 當您單擊按鈕時，將標志變量的狀態更改為 true 當標志為 true 時使用條件渲染使邊框半徑為 0 再次單擊時再次使標志為 false 當標志為 false 時再次使用條件渲染使邊框半徑為 50