jQuery：更改 link 单击时的文本和图标

Question

所以我正在尝试更改折叠部分 link 的图标以及 link 的文本。

这是我的代码：

<a href="#collapse", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
    <i class="material-icons" style="vertical-align: middle;">expand_more</i>
    <label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

<!--CONTENT-->

<script>
    $(document).ready(function(){
        $('#btn-collapse').on('click', function () {
            var text=$('#btn-collapse').text();
            if(text === "SECONDARY TEXT"){
                $(this).text('PRIMARY TEXT');
                $(this).find("i").html("expand_more");
            } else{
                $(this).text('SECONDARY TEXT');
                $(this).find("i").html("expand_less");
            }
        });
    });
</script>

一段时间以来，我一直在尝试为此寻找解决方案，但似乎没有任何效果。文本可以正常更改，但图标在单击时完全消失。我不认为这是一个主要问题，但有些事情我不明白。大家帮忙看看怎么调整？

Answer 1

$(document).ready(function() {
  $('#btn-collapse').on('click', function() {
    var thisElement = $(this);
    var anchorLabelElement = thisElement.find('label');
    if (anchorLabelElement.text() === "SECONDARY TEXT") {
      anchorLabelElement.text('PRIMARY TEXT');
      thisElement.find("i").text('expand_more');
    } else {
      anchorLabelElement.text('SECONDARY TEXT');
      thisElement.find("i").text("expand_less");
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/material-design-icons.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse">
  <i class="material-icons" style="vertical-align: middle;">expand_more</i>
  <label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

jQuery：更改 link 单击时的文本和图标

jQuery: change link text and icon on click

html

javascript

jquery