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

我有一个div，class为

.ban2

，id为

#banner2

每当单击该div本身时，我都希望更改该div的border radius属性。比如当我第一次单击它时，边界半径变为0，当我再次单击时，它返回到

50%050%

我想在这两种风格之间切换。在我的

.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');
});

---

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

---

当标志为false时，再次使用条件渲染使边界半径为50

采用命名标志=false的变量； 单击按钮时，将标志变量的状态更改为true 当标志为true时，使用条件渲染使边界半径为0 再次单击时，再次将标志设为false 当标志为false时，再次使用条件渲染使边界半径为50对于，必须使用

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

element.classList.toggle('className'); 

它将自动为您添加和删除它

因为，你必须使用

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

element.classList.toggle('className'); 

它将自动为您添加和删除它

示例代码段（运行）

$（'#banner2'）。在（'click'，function（）上{
$（'#banner2'）。toggleClass（'ban2Toggle'）；
});
.banner.ban2{
位置：绝对位置；
右：0；
排名：0；
宽度：40%；
高度：63vh；
背景：5a0980；
边界半径：50%050%；
转换：scaleY（1.6）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：1s轻松；
}
.banner.ban2.ban2Toggle{
边界半径：0；
}

乱数假文
对于，您必须使用

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

element.classList.toggle('className'); 

它将自动为您添加和删除它

因为，你必须使用

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

element.classList.toggle('className'); 

它将自动为您添加和删除它

示例代码段（运行）


$（'#banner2'）。在（'click'，function（）上{
$（'#banner2'）。toggleClass（'ban2Toggle'）；
});
.banner.ban2{
位置：绝对位置；
右：0；
排名：0；
宽度：40%；
高度：63vh；
背景：5a0980；
边界半径：50%050%；
转换：scaleY（1.6）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：1s轻松；
}
.banner.ban2.ban2Toggle{
边界半径：0；
}

乱数假文
您需要这样做：

html:

以下是您需要这样做的：

html:

但我已经有了。班2班的同学都来了。我希望将其删除并替换为.ban2toggle，但我已经有了.ban2类。我希望将其删除并替换为.ban2Toggle