Html 如何使用引导和jQuery在两个没有按钮的图标之间切换？

我希望这样，当用户点击心脏图标时，心脏图标被隐藏，心脏填充图标被显示。如何引用jQuery函数中的另一个图标将其“显示”从“无”更改为“显示”？我知道这个例子是错误的，这只是我想做的一个想法，我想不出来

$（'.heart图标'）。单击（函数（）{
$（'.heart icon'）.hide（）；
$（'.heart-filled icon'）.show（）；
});
有许多不同的方法可以做到这一点

一种方法是切换引导显示类。最初将
d-none
或
d-block
放在SVG的类上

$('.bi').click(function(){
  $('.bi').toggleClass('d-none d-block');
})

使用.toggle（）进行显示和隐藏，或使用.hide（）进行隐藏，使用.show（）进行显示，只需使用.classname或#idname like$（“#idname”）.show（）进行引用即可；谢谢你，这很有效！但我有多个图标实例。当我单击一个图标时，所有图标都显示/隐藏。我尝试使用$（this.toggleClass（'d-none d-block'）；}）但它不起作用。