Javascript 使用 bootstrap 4 和 fontawesome 圖標來回更改按鈕文本

Question

我正在使用 bootstrap 4 創建一個帶有下拉菜單的按鈕。 我需要的功能是按鈕關閉時包含打開一詞和旁邊的字體圖標。 打開時，它應該說關閉，旁邊有一個圖標。

我目前正在嘗試這個

 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>

該按鈕在第一次單擊時更改為關閉，但在再次單擊時永遠不會更改回打開。

Answer 1

而不是試圖改變dom 。 為什么不添加第二個具有確切詳細信息的按鈕，然后在兩個按鈕上添加相同的 class 並使用 jquery（因為 bootstrap 4 使用 jquery）隱藏和顯示其他按鈕，如下所示

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