如何使用 Javascript 或 jquery 在样式之间切换答案

【问题标题】：how to toggle between styles using Javascript or jquery如何使用 Javascript 或 jquery 在样式之间切换
【发布时间】：2020-11-07 20:16:34
【问题描述】：

我有一个类为 .ban2 和 id 为 #banner2 的 div。

每当我单击 div 本身时，我都想更改该 div 的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');
});

【问题讨论】：

标签： javascript html jquery css toggle

【解决方案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>

【讨论】：

但我已经有了 .ban2 类。我希望将其删除并替换为 .ban2Toggle

【解决方案2】：

按照the answer from BOZ，您需要这样做：

html:

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

脚本：

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

【讨论】：

【解决方案3】：

取一个命名为flag=false的变量；当您单击按钮时，将标志变量的状态更改为 true 当标志为真时，使用条件渲染使边界半径为 0 再次单击时再次使标志为假当标志为假时，再次使用条件渲染使边界半径为 50

【讨论】：