Question

我试图在单击时更改按钮的文本，并在再次单击时恢复为正常。该按钮使用的字体真棒图标，因此我想尝试使用this.html而不是this.text，但是由于某种原因，它无法识别我所指示的HTML？

如果更改else语句上的HTML，则单击时它将更改，这使我认为无法识别HTML是个问题。

我知道这可能真是愚蠢，但似乎无法弄清。

  $(document).ready(function(){
  $("#submitbutton").on("click", function(){
    if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
    {
        $(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
    } else {
        $(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
    }
})
});

      <div class="getcodebuttoncontainer">
         <button
         type="button"
         class="btn-primary"
         id="submitbutton"
         onclick="retrieveData()"
         >View code <i class="fas fa-chevron-right fa-xs"></i></button>
      </div>

Answer 1

似乎唯一的更改是文本（“查看||关闭”），因此您可以简单地将可变文本放在跨度中-一个带显示：无样式，然后单击-切换每个文本的可见性

$(document).ready(function(){
  $("#submitbutton").on("click", function(){
    $(this).find('span').toggle();
  })
});

#submitbutton span:nth-of-type(2) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
  <button
  type="button"
  class="btn-primary"
  id="submitbutton"
  >
    <span>View</span>
    <span>Close</span>
    code <i class="fas fa-chevron-right fa-xs"></i>
  </button>
</div>

文本和超棒字体图标在切换时不会更改

1 个答案: