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

您需要在trim()上使用button.innerHTML，因为button.innerHTML正在为您提供带有尾随和前导空格的值Edit。因此，条件button.innerHTML === "Edit"为false，因为它尾随空格值Edit。因此，它执行else块，用值button.innerHTML替换Edit，而不用尾随和前导空格。这就是为什么它在第二次点击时工作，因为第二次点击button.innerHTML值Edit没有空格，if条件为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

只需在＆＃39;编辑＆＃39;之前和之后删除html中的额外空格或在比较前使用修剪。

你的功能是第一次被调用但它正在比较＆＃39;编辑＆＃39;用＆＃39;编辑＆＃39;结果为假

Jquery在第二次单击后工作，然后保持正常工作

2 个答案: