Question

我正在尝试向Wordpress网站上的页面添加一些自定义jQuery。

我使用了一个插件，可以将我的代码直接插入到特定页面的head.php文件中，但是代码无法运行，我只是报错了

TypeError：$不是函数

$（document）.ready（function（）{

我从以下问题的答案中使用了jQuery(function ($) { ...：TypeError: $ is not a function when calling jQuery function

<script>

jQuery(function ($(document).ready(function(){
     jQuery(function ($)("#a").mouseover(function(){
         jQuery(function ($)("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-black-cropped.jpg')");
     });

jQuery(function ($)("#a1").mouseover(function(){
        jQuery(function ($)("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-blue-cropped.jpg')");
     });

jQuery(function ($)("#a2").mouseover(function(){
         jQuery(function ($)("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-wash-cropped.jpg')");
     });

    jQuery(function ($)("#slim-a").mouseover(function(){
         jQuery(function ($)("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/black-slim-rollover-cropped.jpg')");
     });

 jQuery(function ($)("#slim-a1").mouseover(function(){
         jQuery(function ($)("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/blue-slim-rollover-cropped.jpg')");
     });

jQuery(function ($)("#slim-a2").mouseover(function(){
         jQuery(function ($)("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/blue-washed-slim-rollover-cropped.jpg')");
     });

});

</script>

我认为我的语法有误，但是我不确定在哪里。

我还尝试通过CDN在代码中链接jQuery，但是这停止了页面上其他来自插件的jQuery元素的工作，例如导航栏。

如果有人知道我在做什么错以及如何解决此问题，我将非常感谢您的帮助！

Answer 1

当我运行这段代码时，它会抛出：

未捕获到的SyntaxError：意外令牌（

function ($)("#b")

…是语法错误。

您将$用作参数的名称，在函数中用作变量。您已跳过使用{和}创建函数主体的位置，以及将$之前放置函数名称（(arguments)）的位置跳过到它。

您正在寻找的语法是（我将其拆分为清晰的命名函数，而不是内联所有内容）。

function readyEventHandler ($) {
    // Inside this function `$` is whatever is passed as the first argument

    function mouseoverEventHandler(event) {
          // Code to run on mouseover
    }

    const element = $("#a");
    element.on("mouseover", mouseoverEventHandler);
}

jQuery(mouseoverEventHandler); // When the DOM is ready, this will call mouseoverEventHandler and pass the jQuery object in as the first argument

…或内联所有内容的版本：

jQuery(function ($) {
    $("#a").on("mouseover", function (event) {
        // Code to run on mouseover
    });

    // Put other calls to `$` here. Don't create additional `jQuery(readyEventHandler)`s!
});

Answer 2

您的脚本中有语法错误，请尝试运行此脚本。

<script>
    jQuery(document).ready(function(){
         jQuery("#a").mouseover(function(){
             jQuery("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-black-cropped.jpg')");
         });

    jQuery("#a1").mouseover(function(){
            jQuery("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-blue-cropped.jpg')");
         });

    jQuery("#a2").mouseover(function(){
             jQuery("#b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/straight-wash-cropped.jpg')");
         });

    jQuery("#slim-a").mouseover(function(){
             jQuery("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/black-slim-rollover-cropped.jpg')");
         });

     jQuery("#slim-a1").mouseover(function(){
             jQuery("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/blue-slim-rollover-cropped.jpg')");
         });

    jQuery("#slim-a2").mouseover(function(){
             jQuery("#slim-b").css("background-image", "url('https://oxfordriderwear.com/wp-content/uploads/2019/07/blue-washed-slim-rollover-cropped.jpg')");
         });

    });
</script>

将jQuery添加到Wordpress头

2 个答案: