时间戳

首页 > 解决方案 > 如何使用 boot-strap 和 jQuery 在没有按钮的两个图标之间切换？

html - 如何使用 boot-strap 和 jQuery 在没有按钮的两个图标之间切换？

问题描述

我想要这样当用户点击心形图标时，心形图标被隐藏并显示心形图标。如何在我的 jQuery 函数中引用另一个图标以将其“显示”从“无”更改为“显示”？我知道这个例子确实是错误的，这只是我想要做的一个想法，我无法弄清楚。

$('.heart-icon').click(function(){
  $('.heart-icon').hide();
  $('.heart-filled-icon').show();
});
<svg width="1em" height="1em" viewBox="0 0 16 16" class="heart-icon bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<svg width="1em" height="1em" style ="display:none;" viewBox="0 0 16 16" class="heart-filled-icon bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>

标签： htmljquerycssbootstrap-4

解决方案

有很多不同的方法可以做到这一点......

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

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

https://codeply.com/p/FmVXaxOvoA

推荐阅读