Javascript 单击“切换材质设计”图标按钮

我正在寻找一种非jQuery的隐藏方式&切换时显示材质设计图标按钮。不确定我是否应该使用

innerHtml

或其他方法来完成。假设我正在尝试复制jQuery的

hide

和

show

方法。非常感谢您的帮助

类切换{
构造函数（）{
this.toggleStar=document.querySelector（“.iconStar”）
this.togglePhone=document.querySelector（“.iconPhone”）
this.toggleMe=document.querySelector（“.toggleMe”）
这是一个事件（）
}
事件（）{
this.toggleStar.addEventListener（“单击“，（）=>this.toggleColor（））
}
切换颜色（）{
this.toggleMe.classList.toggle（“toggleMe--blue”）
//将手机图标更改为星形并反转
//像jquery$（.iconStar.hide（）/show（）一样
}
}

。切换我{
背景：红色；
}
.给我-蓝色{
背景：蓝色；
}

明星
电话

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

类切换{
构造函数（）{
this.toggleStar=document.querySelector（“.iconStar”）
this.togglePhone=document.querySelector（“.iconPhone”）
this.toggleMe=document.querySelector（“.toggleMe”）
这是一个事件（）
}
事件（）{
this.toggleMe.addEventListener（“单击“，（）=>this.toggleColor（））；
}
切换颜色（）{
this.toggleMe.classList.toggle（“toggleMe--blue”）
//在此处切换图标可见性
this.toggleStar.classList.toggle（“隐藏”）；
this.togglePhone.classList.toggle（“隐藏”）；
}
}
让toggleMe=新的toggleMe（）
。切换我{
背景：红色；
}
.给我-蓝色{
背景：蓝色；
}
/*将此类添加到隐藏图标*/
.mdc-icon-button.hidden{
显示：无；
}

明星
电话