javascript - 需要单击两次以触发.one()函数

我需要在代码中获取一个切换功能，因此我进行了搜索并得到了它。现在，我将其实现到我的代码中（下面的代码已简化），但是您必须单击两次按钮才能使其正常工作。单击两次后，它可以正常工作。

是什么导致此问题，我该如何解决？

var triggerbtn = $('#trigger');

function showThis() {
  triggerbtn.text('Show this!');
  $(this).one("click", hideThis);
}

function hideThis() {
  triggerbtn.text('Hide this!');
  $(this).one("click", showThis);
}

triggerbtn.one("click", showThis);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>

最佳答案

按钮的默认状态为show，并且在首次单击时再次尝试将其设置为show。第一次点击应该是hide

var triggerbtn = $('#trigger');

function showThis() {
  triggerbtn.text('Show this!');
  $(this).one("click", hideThis);
}

function hideThis() {
  triggerbtn.text('Hide this!');
  $(this).one("click", showThis);
}

triggerbtn.one("click", hideThis);  // Here is the change

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>