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，因为它的尾随 whilespace 值带有 Edit。因此，它执行 else block ，该 block 将 button.innerHTML 替换为值 Edit，且不带尾随和前导空格。这就是为什么它在第二次单击时起作用，因为在第二次单击时， button.innerHTML 值是 Edit ，没有空格，并且 if 条件是 正确。

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>