jQuery卡片点击翻转功能需两次触发问题求助

嘿，刚接触jQuery遇到这种小坑太正常啦，我来帮你搞定这个问题～

问题根源 #

你现在的代码是把点击事件绑定在flip()函数里，如果这个函数被多次调用（比如页面加载时执行了好几次，或者其他逻辑触发了它），就会导致同一个.flip元素上绑定了多个相同的点击事件。第一次点击时，第一个事件触发切换flipped类，第二个事件紧接着又把类切回去，看起来就像没反应；第二次点击才会再次切换到预期的翻转状态——这就是为啥需要两次点击的核心原因！

解决方案 #

这里给你两种简单的修复方式：

方式1：清除重复绑定再绑定事件

在绑定新的点击事件前，先用.off('click')清除掉之前绑定的同类型事件，确保每个元素只有一个点击事件生效：

function flip() {
  jQuery('.flip').off('click').click(function() {
    jQuery(this).find('.card').toggleClass('flipped');
  });
}

方式2：确保事件只绑定一次

把事件绑定放在DOM加载完成的回调里，这样只会执行一次绑定，从根源避免重复绑定的问题：

jQuery(document).ready(function() {
  jQuery('.flip').click(function() {
    jQuery(this).find('.card').toggleClass('flipped');
  });
});

这种方式就不需要单独写flip()函数啦，页面加载完成后自动完成事件绑定，逻辑更简洁。

额外检查（可选） #

如果上面的方法还没解决问题，可以检查下CSS里.card的初始状态，看看是不是flipped类的初始样式和默认状态有冲突，但90%的概率都是事件重复绑定导致的～

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