带字体的切换类不工作

发布于 2025-02-12 17:54:46 字数 830 浏览 1 评论 0原文

我有多个按钮,当单击“类似”按钮时,我希望字体很棒的图标也可以切换,但是,我设置了字体真棒图标的方式就消失了,但是我可以看到类更改。不确定从这里去哪里。

$("button").click(function() {
  $('#like' + this.id).toggleClass("fa-regular fa-thumbs-up");
});
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="like-button btn" id="1">
      <i class="fa-solid fa-thumbs-up" id="like1"></i>
    </button>

<button class="like-button btn" id="2">
      <i class="fa-solid fa-thumbs-up" id="like2"></i>
    </button>

I have multiple buttons, when a like button is clicked I would like the font awesome icon to switch as well, however, the way I have it set up the font awesome icon just disappears, but I can see the class change. Not sure where to go from here.

$("button").click(function() {
  $('#like' + this.id).toggleClass("fa-regular fa-thumbs-up");
});
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="like-button btn" id="1">
      <i class="fa-solid fa-thumbs-up" id="like1"></i>
    </button>

<button class="like-button btn" id="2">
      <i class="fa-solid fa-thumbs-up" id="like2"></i>
    </button>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

薆情海 2025-02-19 17:54:47

如果要更改图标/样式,只需将其他类添加到toggleclass喜欢:

$("button").click(function() {
    $('#like'+this.id).toggleClass("fa-solid fa-thumbs-up fa-regular fa-thumbs-up");
  });
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="like-button btn" id="1">
  <i class="fa-solid fa-thumbs-up" id="like1"></i>
</button>

<button class="like-button btn" id="2">
  <i class="fa-solid fa-thumbs-up" id="like2"></i>
</button>

If you want to change icon/style just add other class to toggleClass like:

$("button").click(function() {
    $('#like'+this.id).toggleClass("fa-solid fa-thumbs-up fa-regular fa-thumbs-up");
  });
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="like-button btn" id="1">
  <i class="fa-solid fa-thumbs-up" id="like1"></i>
</button>

<button class="like-button btn" id="2">
  <i class="fa-solid fa-thumbs-up" id="like2"></i>
</button>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文