WordPress调用翻转卡片按钮函数报错：$ is not a function

嘿，这个问题在WordPress里太常见了！报错的核心原因是WordPress默认开启了jQuery的noConflict模式，它会把$这个常用的jQuery别名给禁用掉，避免和其他JS库冲突。下面给你几个快速解决的方案，还有补充的样式修复：

方案1：直接替换$为jQuery #

把你的JS代码里所有的$换成jQuery就行，修改后的代码如下：

function rotateCard(btn){ 
  var card = jQuery(btn).closest('.card-container'); 
  console.log(card); 
  if(card.hasClass('hover')){ 
    card.removeClass('hover'); 
  } else { 
    card.addClass('hover'); 
  } 
}

方案2：用自执行函数包裹代码（推荐，适合多JS场景） #

如果后面还要写更多jQuery代码，用这种方式可以重新在局部作用域里用$，不用每次都写jQuery：

(function($) {
  window.rotateCard = function(btn){ 
    var $card = $(btn).closest('.card-container'); 
    console.log($card); 
    if($card.hasClass('hover')){ 
      $card.removeClass('hover'); 
    } else { 
      $card.addClass('hover'); 
    } 
  }
})(jQuery);

注意这里要把rotateCard挂到window对象上，不然 onclick 事件找不到这个函数哦。

补充：修复翻转样式 #

看你的CSS代码，还缺了hover类触发卡片翻转的关键样式，加上这段CSS才能让卡片真正转起来：

.card-container.hover .card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

额外检查：确保jQuery已加载 #

如果上面改了还是不行，得确认WordPress已经加载了jQuery。可以在主题的functions.php里添加这段代码，强制加载默认的jQuery：

function load_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'load_jquery');

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