单击时切换 Material Design 图标按钮

Question

我正在寻找一种在切换时隐藏和显示 Material Design 图标按钮的非 jQuery 方式。 不知道我是否应该使用innerHtml或其他东西来做。 假设我正在尝试复制 jQuery 的hide和show方法。 非常感谢任何帮助。

 class ToggleMe { constructor() { this.toggleStar = document.querySelector(".iconStar") this.togglePhone = document.querySelector(".iconPhone") this.toggleMe = document.querySelector(".toggle-me") this.events() } events() { this.toggleStar.addEventListener("click", () => this.toggleColor()) } toggleColor() { this.toggleMe.classList.toggle("toggle-me--blue") // change icon from Phone to Star and reverse // like jquery $(.iconStar).hide() / show() } }

 .toggle-me { background: red; }.toggle-me--blue { background: blue; }

 <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="toggle-me"> <button class="mdc-icon-button material-icons iconStar">star</button> <button class="mdc-icon-button material-icons iconPhone">phone</button> </div>

Answer 1

您可以绑定一个事件处理程序来切换图标上的 class 切换哪个是可见的，哪个是隐藏的，如下所示：

 class ToggleMe { constructor() { this.toggleStar = document.querySelector(".iconStar") this.togglePhone = document.querySelector(".iconPhone") this.toggleMe = document.querySelector(".toggle-me") this.events() } events() { this.toggleMe.addEventListener("click", () => this.toggleColor()); } toggleColor() { this.toggleMe.classList.toggle("toggle-me--blue") // toggle icon visibility here this.toggleStar.classList.toggle("hidden"); this.togglePhone.classList.toggle("hidden"); } } let toggleMe = new ToggleMe();

 .toggle-me { background: red; }.toggle-me--blue { background: blue; } /* add this class to hide icon */.mdc-icon-button.hidden { display: none; }

 <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="toggle-me"> <button class="mdc-icon-button material-icons iconStar">star</button> <button class="mdc-icon-button material-icons iconPhone hidden">phone</button> </div>