如何在 jquery 中使用字体很棒的图标而不是文本进行切换

问题描述

为了制作一个引导模式全屏，我使用这个可以正常工作的切换。

<!-- Modal content-->
<div class="modal-content">
    
    <div class="modal-header">
        <h3 class="modal-title">Title</h3>
        <span class="fullscreen">Expand</span> <!-- toggle trigger text -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        
    </div>
    ...

我的jQuery：

// fullscreen modal
$(".fullscreen").on('click',function() {
  if($(this).text() == 'Expand'){
       $(this).text('Collapse');
       $(".modal-dialog").addClass("modal-fullscreen");
    }else{
       $(this).text('Expand');
       $(".modal-dialog").removeClass("modal-fullscreen");
    }
});

现在我想用字体很棒的图标更改单词 Expand 和 collapse 但这是我在下面尝试的方式，切换不再起作用，因为它不再是文本...

<!-- Modal content-->
<div class="modal-content">

    <div class="modal-header">
        <h3 class="modal-title">Title</h3>
        <span class="fullscreen"><i class="fas fa-expand-arrows-alt"></i></span> <!-- toggle trigger icon -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

    </div>
    ...

//jquery
// fullscreen modal
$(".fullscreen").on('click',function() {
  if($(this).text() == '<i class="fas fa-expand-arrows-alt"></i>'){
       $(this).text('<i class="fas fa-compress-arrows-alt"></i>');
       $(".modal-dialog").addClass("modal-fullscreen");
    }else{
       $(this).text('<i class="fas fa-expand-arrows-alt"></i>');
       $(".modal-dialog").removeClass("modal-fullscreen");
    }
});

我怎样才能用字体很棒的图标来做这个工作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）