仅更改字体真棒图标答案

【问题标题】：Change Font Awesome Icon Only仅更改字体真棒图标
【发布时间】：2021-12-10 14:11:15
【问题描述】：

单击时，我正在尝试将图标从 chevron-down 更改为 chevron-up。目前，它在单击时显示“类别”和“隐藏”。我想让它一直说“类别”。这可能吗？

代码如下：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
    <i class="fa fa-chevron-down"></i> Categories
</h1>

<div id="showhide" style="display:none;">
        <ul>
            <li><a href="#">Hello World</a>
            </li>
        </ul>
</div>

function arata_ascunde(h1) {
    var x = $('#showhide');
    $(h1).find('i').remove();
    if ($(h1).text().trim() == 'Categories') {
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Hide ');
        x.fadeIn();
    }
    else {
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
        x.fadeOut();
    }
}

代码笔：https://codepen.io/chadwicked123/pen/porRoOq

【问题讨论】：

标签： javascript font-awesome accordion

【解决方案1】：

如果在所有条件下都相同，则您的“如果条件”是无法检测到的。因此，最好将您的条件更改为更具体的内容，例如标签的类。像这样：

function arata_ascunde(h1) {
    var x = $('#showhide');
    if ($(h1).find('i').hasClass('fa-chevron-down')) {
        $(h1).find('i').remove();
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories');
        x.fadeIn();
    } else {
        $(h1).find('i').remove();
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
        x.fadeOut();
    }
}

我更改了一些内容以使您的结果更漂亮。这段代码仍然可以改进（我不是前端开发人员）。

【讨论】：

【解决方案2】：

我使用基本的 javascript 和一些逻辑来更改基于类的 HTML

这是它的代码笔 - Link

这是编辑后的 JS 文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
     Categories<i class="fa fa-chevron-down"></i>
</h1>

<div id="showhide" style="display:none;">
        <ul>
            <li><a href="#">Hello World</a>
            </li>
        </ul>
</div>

和编辑后的JS文件

function arata_ascunde(h1) {
    var x = $('#showhide');
    $(h1).find('i').remove();
    if (document.querySelector("h1").classList.contains("down")) {
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories ');
      document.querySelector("h1").classList.remove("down")
        x.fadeIn();
    }
    else {
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
      document.querySelector("h1").classList.add("down")
        x.fadeOut();
    }
}

【讨论】：