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

Question

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

每当我单击div本身时，我都想更改这个div的边框半径属性。就像当iI第一次单击它时，边框半径变成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

遵循博兹的回答，您需要这样做：

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再次使用条件呈现。