如果在 javascript 中拨动开关，则关闭 css 微调器

Question

您好，我的页面上有一个切换开关和微调器。 我希望微调器在拨动开关关闭时停止旋转或消失。 我相信为此我需要某种 javascript，但我是新手。 请协助编写javascript，了解如何根据.switch 值执行spinner。

.html 页

 @keyframes spinner { 0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); } } 100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); }.switch { position: relative; display: inline-block; width: 55px; height: 28px; }.spin::before { animation: 1.5s linear infinite spinner; animation-play-state: inherit; border: solid 5px #cfd0d1; border-bottom-color: #1c87c9; border-radius: 50%; content: ""; height: 20px; width: 20px; position: absolute; top: 26%; left: 35%; transform: translate3d(-50%, -50%, 0); will-change: transform; }.switch { position: relative; display: inline-block; width: 55px; height: 28px; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } <span class="slider round"></span> <div class="spin"></div>

Answer 1

使用 JavaScript，您可以像这样删除一个元素：

const el = document.querySelector("div.spin"); // your css query here
el.parentElement.removeChild(el);

我发现隐藏它有时会更好（以防你需要稍后再次显示加载）：

const el = document.querySelector("div.spin"); // your css query here
el.style.display = "non"; // hide using CSS display

您希望将此代码放在输入的onclick处理程序上（我不相信您的代码中有）。 如果它是一个按钮，你可以这样做：

<button onclick="const el = document.querySelector('div.spin');el.parentElement.removeChild(el);">Click to remove element</button>

有很多方法可以将 JavaScript 嵌入到您的 HTML 网站中； 有关更多信息，我建议阅读MDN 文档。

Answer 2

最好将 HTML 和 JavaScript 分开。在您的 HTML 中，您可以使用<button onclick="some javascript code"> ，而不是使用<button id="my-toggle-btn"> 。

然后，您的 JavaScript 代码可以在 HTML脚本元素内的 go 与您的 HTML 位于同一页面上，如下所示：

<script>
  const myToggleBtn = document.querySelector('#my-toggle-btn');
  myToggleBtn.addEventListener('click', function(){
    // some more javascript code
  });
</script>

另一种方法是将 javascript 代码放在一个文件中，例如main.js 。 然后，您可以通过在 HTML 的head元素中添加一个脚本元素来包含该文件的内容：

<head>
  <script src="./main.js"></script>
</head>

大多数人根据情况混合使用所有这些方法。 了解所有这些很重要。

如果在 javascript 中拨动开关，则关闭 css 微调器

问题描述

2 个解决方案

解决方案1
0 2022-11-17 23:22:22

解决方案2
0 2022-11-18 01:00:50

如果在 javascript 中拨动开关，则关闭 css 微调器

问题描述

2 个解决方案

解决方案1 0 2022-11-17 23:22:22

解决方案2 0 2022-11-18 01:00:50

解决方案1
0 2022-11-17 23:22:22

解决方案2
0 2022-11-18 01:00:50