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

Question

我有一个 div，class 为 .ban2，ID 为 #banner2。

我想在每次单击 div 本身时更改此 div 的边框半径属性。就像我第一次点击它时 border-radius 变为 0 并且当我再次点击时它又回到 50% 0 0 50%.

我想在这两种风格之间切换。在我的 .ban2Toggle class 中，我包含了所有样式，但边框半径为 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

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

Answer 2

对于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 3

下面你需要这样做：

html:

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

脚本：

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

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

how to toggle between styles using Javascript or jquery

html

javascript

css

jquery

toggle