使用jQuery .one()实现切换功能需点击两次触发，求原因及解决方法

嘿，我来帮你拆解这个问题！你遇到的第一次点击没反应、两次后才恢复正常的情况，根源出在one()事件绑定的逻辑和初始状态的匹配上。

问题成因 #

咱们先理清楚你的代码逻辑：你定义了showThis和hideThis两个函数，它们的作用是修改按钮文本，再用one()给按钮绑定另一个函数的单次点击事件。问题大概率出在初始事件绑定的缺失或不匹配上：

• 如果页面加载后，你没有给按钮绑定任何初始点击事件，第一次点击时根本没有函数被触发，自然没反应；等你第二次点击，可能之前的操作才补全了第一次绑定？更常见的情况是：你初始绑定了showThis，但按钮默认文本已经是Show this!——第一次点击执行showThis，只是把文本设成了和原来一样的内容，你肉眼看不出变化，误以为点击无效；这时候函数已经帮你绑定了hideThis，第二次点击就会触发隐藏逻辑，文本变成Hide this!，之后的切换就正常了。
• 另外，one()的特性是事件触发一次后自动解绑，你在两个函数里互相绑定对方的单次事件，一旦初始绑定的函数和按钮当前状态不匹配，就会出现第一次点击“无效”的错觉。

修复方案 #

我给你两种修复思路，任选其一都能解决问题：

方案1：修正初始事件绑定逻辑 #

如果坚持要用one()的方式，要确保初始绑定的函数和按钮的初始状态对应：

var triggerbtn = $('#trigger');

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

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

// 关键：根据按钮初始文本绑定对应事件
if (triggerbtn.text() === 'Show this!') {
  // 初始是显示状态，点击应该触发隐藏
  triggerbtn.one("click", hideThis);
} else {
  // 初始是隐藏状态，点击应该触发显示
  triggerbtn.one("click", showThis);
}

方案2：改用持久点击事件（更推荐） #

其实完全没必要用one()来回绑定解绑，直接用on()绑定一个持久的点击事件，在内部判断当前状态切换即可，逻辑更简洁，也不会有初始绑定的问题：

var triggerbtn = $('#trigger');

triggerbtn.on('click', function() {
  const $btn = $(this);
  // 根据当前文本判断切换方向
  if ($btn.text() === 'Show this!') {
    $btn.text('Hide this!');
  } else {
    $btn.text('Show this!');
  }
});

如果怕文本判断不够可靠，也可以用变量跟踪状态：

var triggerbtn = $('#trigger');
// 初始化状态：根据按钮初始文本判断
var isShowing = triggerbtn.text() === 'Show this!';

triggerbtn.on('click', function() {
  if (isShowing) {
    triggerbtn.text('Hide this!');
  } else {
    triggerbtn.text('Show this!');
  }
  // 切换状态标记
  isShowing = !isShowing;
});

这样修改后，第一次点击就能正常触发切换，再也不需要点两次啦！

内容的提问来源于stack exchange，提问作者Jeremy