jQuery在第二次單擊后工作，然后保持正常運行

Question

這是腳本，可以正常運行，但在第二次單擊時便開始工作。 它應該從第一次點擊就可以工作。

function change_text() {
  var button = document.getElementById('toggle_button');
  if (button.innerHTML === "Edit") {
    button.innerHTML = "Save";
  } else {
    button.innerHTML = "Edit";
  }
}

這是html：

<h3 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#tsAccordion" href="#tsCollapseOne;#tsCollapseTwo">
    <span class="pull-right" id="toggle_button" onclick="change_text()" style="text-decoration: underline; color: orange; text-align: center; font-size: 16px; margin-top: -54px"> Edit </span>
  </a>
</h3>

請幫忙。

 function change_text() { var button = document.getElementById('toggle_button'); if (button.innerHTML === "Edit") { button.innerHTML = "Save"; } else { button.innerHTML = "Edit"; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#tsAccordion" href="#tsCollapseOne;#tsCollapseTwo"> <span class="pull-right" id="toggle_button" onclick="change_text()" style="text-decoration: underline; color: orange; text-align: center; font-size: 16px; margin-top: -54px"> Edit </span> </a> </h3> 

Answer 1

您需要在button.innerHTML trim()用作button.innerHTML為您提供值Edit帶有尾部和前導空格）。 因此，條件button.innerHTML === "Edit"為false因為它具有Edit尾隨whilespace值。 因此，執行else塊，其取代button.innerHTML與值Edit而不尾隨和領先空格。 這就是為什么它可以進行第二次單擊的原因，就像第二次單擊按鈕一樣button.innerHTML值是Edit而沒有空格，並且if condition為true 。

 function change_text() { var button = document.getElementById('toggle_button'); if (button.innerHTML.trim() === "Edit") { button.innerHTML = "Save"; } else { button.innerHTML = "Edit"; } } 

 <h3 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#tsAccordion" href="#tsCollapseOne;#tsCollapseTwo"> <span class="pull-right" id="toggle_button" onclick="change_text()" style="text-decoration: underline; color: orange; text-align: center; font-size: 16px; margin-top: -54px"> Edit </span> </a> </h3> 

Answer 2

只需在“編輯”之前和之后刪除html中的多余空格，或者在比較之前使用修剪。

您的函數是第一次被調用，但它會將“ Edit”與“ Edit”進行比較，結果為false