单击时切换 Material Design 图标按钮答案

【问题标题】：Toggle Material Design icon button on click单击时切换 Material Design 图标按钮
【发布时间】：2021-05-17 16:51:46
【问题描述】：

我正在寻找一种在切换时隐藏和显示 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>

【问题讨论】：

标签： javascript html jquery css ecmascript-6

【解决方案1】：

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

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>

【讨论】：