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