Wordpress 上未加载 JavaScript

Question

这个问题已经有答案了:

How to fix "TypeError: $ is not a function" error in WordPress custom page? (3 个回答)

已关闭 7 年前。

我正在研究这个website (用 WordPress 构建)。我正在尝试实现 <script>为表格设置动画。

具体而言，每次将鼠标悬停在表格行上时，我都需要在右侧显示不同的图片。

这是我正在使用的代码:

<script>
    $(document).ready(function(){
$('.row1').hover(function() {
  $('.one').toggle();
});

$('.row2').hover(function() {
  $('.two').toggle();
});

$('.row3').hover(function() {
  $('.tree').toggle();
}); 

$('.row4').hover(function() {
  $('.four').toggle();
}); 

$('.row5').hover(function() {
  $('.five').toggle();
});

$('.row6').hover(function() {
  $('.six').toggle();
});

$('.row7').hover(function() {
  $('.seven').toggle();
});

 $('.row8').hover(function() {
  $('.eight').toggle();
});

 $('.row9').hover(function() {
  $('.nine').toggle();
}); 

$('.row10').hover(function() {
  $('.ten').toggle();
});

$('.row11').hover(function() {
  $('.eleven').toggle();
});

$('.row12').hover(function() {
  $('.twelve').toggle();
}); 

$('.row13').hover(function() {
  $('.thirteen').toggle();
});     

$('.row14').hover(function() {
  $('.quattordici').toggle();
});    

 $('.row15').hover(function() {
  $('.quindici').toggle();
});    

 $('.row16').hover(function() {
 $('.sedici').toggle();
});

 $('.row17').hover(function() {
 $('.diciassette').toggle();
}); 

 $('.row18').hover(function() {
 $('.diciotto').toggle();
});  

 $('.row19').hover(function() {
 $('.diciannove').toggle();
});

 $('.row20').hover(function() {
 $('.venti').toggle();
});

 $('.row21').hover(function() {
 $('.ventuno').toggle();
}); 

$('.row22').hover(function() {
 $('.ventidue').toggle();
});   

$('.row23').hover(function() {
 $('.ventitre').toggle();
}); 

$('.row24').hover(function() {
 $('.ventiquattro').toggle();
});

$('.row25').hover(function() {
 $('.venticinque').toggle();
});

$('.row26').hover(function() {
 $('.ventisei').toggle();
});

$('.row27').hover(function() {
  $('.ventisette').toggle();
}); 

$('.row28').hover(function() {
  $('.ventotto').toggle();
});

$('.row29').hover(function() {
  $('.ventinove').toggle();
});

$('.row30').hover(function() {
  $('.trenta').toggle();
});

$('.row31').hover(function() {
  $('.trentuno').toggle();
});

$('.row32').hover(function() {
  $('.trentadue').toggle();
});

$('.row33').hover(function() {
  $('.trentatre').toggle();
});

$('.row34').hover(function() {
  $('.trentaquattro').toggle();
});

 $('.row35').hover(function() {
  $('.trentacinque').toggle();
}); 

$('.row36').hover(function() {
  $('.trentasei').toggle();
});

$('.row37').hover(function() {
  $('.trentasette').toggle();
});

$('.row38').hover(function() {
  $('.trentotto').toggle();
});

$('.row39').hover(function() {
  $('.trentanove').toggle();
});

$('.row40').hover(function() {
  $('.quaranta').toggle();
});

$('.row41').hover(function() {
  $('.quarantuno').toggle();
});

$('.row42').hover(function() {
  $('.quarantadue').toggle();
});

$('.row43').hover(function() {
  $('.quarantatre').toggle();
});

$('.row44').hover(function() {
  $('.quarantaquattro').toggle();
});

$('.row45').hover(function() {
  $('.quarantacinque').toggle();
});

$('.row46').hover(function() {
  $('.quarantasei').toggle();
});

$('.row47').hover(function() {
  $('.quarantasette').toggle();
});

$('.row48').hover(function() {
  $('.quarantotto').toggle();
});

$('.row49').hover(function() {
  $('.quarantanove').toggle();
});

$('.row50').hover(function() {
  $('.cinquanta').toggle();
});

$('.row51').hover(function() {
  $('.cinquantuno').toggle();
});

$('.row52').hover(function() {
  $('.cinquantadue').toggle();
});

$('.row53').hover(function() {
  $('.hause2_1').toggle();
});

$('.row54').hover(function() {
  $('.hause2_2').toggle();
});

$('.row55').hover(function() {
  $('.hause2_3').toggle();
});

$('.row56').hover(function() {
  $('.hause2_4').toggle();
});

$('.row57').hover(function() {
  $('.hause2_5').toggle();
});

$('.row58').hover(function() {
  $('.hause2_6').toggle();
});

$('.row59').hover(function() {
  $('.hause2_7').toggle();
});

$('.row60').hover(function() {
  $('.hause2_8').toggle();
});

$('.row61').hover(function() {
  $('.hause2_9').toggle();
});

$('.row62').hover(function() {
  $('.hause2_10').toggle();
});

$('.row63').hover(function() {
  $('.hause2_11').toggle();
});

$('.row64').hover(function() {
  $('.hause2_12').toggle();
});

$('.row65').hover(function() {
  $('.hause2_13').toggle();
});

$('.row66').hover(function() {
  $('.hause2_14').toggle();
});

$('.row67').hover(function() {
  $('.hause2_15').toggle();
});

$('.row68').hover(function() {
  $('.hause2_16').toggle();
});

$('.row69').hover(function() {
  $('.hause2_17').toggle();
});

$('.row70').hover(function() {
  $('.hause2_18').toggle();
});

$('.row71').hover(function() {
  $('.hause2_19').toggle();
});

$('.row72').hover(function() {
  $('.hause2_20').toggle();
});

$('.row73').hover(function() {
  $('.hause2_21').toggle();
});

$('.row74').hover(function() {
  $('.hause2_22').toggle();
});

$('.row75').hover(function() {
  $('.hause2_23').toggle();
});

$('.row76').hover(function() {
  $('.hause2_24').toggle();
});

$('.row77').hover(function() {
  $('.hause2_25').toggle();
});

$('.row78').hover(function() {
  $('.hause2_26').toggle();
});

$('.row79').hover(function() {
  $('.hause2_27').toggle();
});

$('.row80').hover(function() {
  $('.hause2_28').toggle();
});

$('.row81').hover(function() {
  $('.hause2_29').toggle();
});

$('.row82').hover(function() {
  $('.hause2_30').toggle();
});        

$('.row83').hover(function() {
  $('.hause2_31').toggle();
});

$('.row84').hover(function() {
  $('.hause2_32').toggle();
}); 

$('.row85').hover(function() {
  $('.hause2_33').toggle();
});

$('.row86').hover(function() {
  $('.hause2_34').toggle();
});

$('.row87').hover(function() {
  $('.hause2_35').toggle();
});

$('.row88').hover(function() {
  $('.hause2_36').toggle();
});

$('.row89').hover(function() {
  $('.hause2_37').toggle();
});

$('.row90').hover(function() {
  $('.hause2_38').toggle();
});

$('.row91').hover(function() {
  $('.hause2_39').toggle();
});

$('.row92').hover(function() {
  $('.hause2_40').toggle();
});

$('.row93').hover(function() {
  $('.hause2_41').toggle();
});

$('.row94').hover(function() {
  $('.hause2_42').toggle();
});

$('.row95').hover(function() {
  $('.hause2_43').toggle();
});

$('.row96').hover(function() {
  $('.hause2_44').toggle();
});

$('.row97').hover(function() {
  $('.hause2_45').toggle();
});        
});
</script>

没有结果。有什么建议吗？

Answer 1

Without results

哦，我怀疑有结果了。打开 Web 控制台，您可能会看到一条错误消息。 :-)

默认情况下，Wordpress 会调用 jQuery 的 noConflict 模式，您需要使用 jQuery 而不是 $ 来访问它。

jQuery 的 ready 回调(您已经在使用)将向您传递对 jQuery 的引用作为第一个参数。您可以使用 $ 作为参数名称，这意味着您只需将 $(document) 更改为 jQuery(document):

jQuery(document).ready(function($){
    $('.row1').hover(function() {
        $('.one').toggle();
    });
    // ...and so on...
});