Javascript 使用 bootstrap 4 和 fontawesome 图标来回更改按钮文本答案

【问题标题】：Javascript to change button text back and forth using bootstrap 4 & fontawesome iconsJavascript 使用 bootstrap 4 和 fontawesome 图标来回更改按钮文本
【发布时间】：2022-02-14 22:45:18
【问题描述】：

我正在使用 bootstrap 4 创建一个带有下拉菜单的按钮。我需要的功能是按钮在关闭时包含单词 open 和旁边的 fontawesome 图标。打开时，它应该说关闭，旁边有一个图标。

我正在尝试这个

function toggle() {
  const btn = document.body.querySelector("#dropdownMenu2");

  if (btn.innerText == "Open") {
    btn.innerHTML = "<i class='fa fa-plus-circle' aria-hidden='true'></i>" + "Open";
  } else {
    btn.innerHTML = "<i class='fa fa-minus-circle' aria-hidden='true'></i>" + "Close";
  }
}

.dropdown-toggle {
  border-radius: 0;
  border-style: solid;
  border-color: #9d2235;
  background-color: #9d2235;
  color: #fff;
  padding: 8px 20px;
}

<button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="toggle()">
               <i class="fa fa-plus-circle" aria-hidden="true"></i>                
                Actions
</button>

按钮在第一次单击时变为关闭，但在再次单击时不会变回打开状态。

【问题讨论】：

您的代码显示：如果 text = open，请将其更改为“open”。因为它开始时不是“开放的”，所以它永远不会是“开放的”
if (btn.innerText != "Open") { 或 if (btn.innerText == "Close") { 取决于您打算从 Actions 的加载值中进行 第一次 点击（显然，既不打开也不关闭）
这是指“动作”文本吗？那应该是打开的，但我忘了更改它。那时它会开始开放..
它只会影响第一次点击 - 之后它会正常切换 - 所以任何一种情况都可以工作，只是 not =="Open" - 如果它以 Open 开头（而不是比行动）然后if = "Open" then make it ="Open"显然什么都不做。
好的，有道理，谢谢。我根据此处另一个问题的答案获得了该代码。您可能会立即清楚，但我们中的一些人是初学者。 :)

标签： javascript html jquery bootstrap-4

【解决方案1】：

而不是试图改变dom。为什么不添加第二个具有确切详细信息的按钮，然后在两个按钮上添加相同的类并使用 jquery（因为 bootstrap 4 使用 jquery）来隐藏和显示其他类似以下内容

$('.buttonClass').toggle();

【讨论】：