Add jQuery to Wordpress head

Question

I'm trying to add some custom jQuery to a page on my wordpress site.

I have used a plugin that allows me to insert my code directly in to my head.php file for the specific page but the code doesn't run, i just get the error

TypeError: $ is not a function

$(document).ready(function(){

I used jQuery(function ($) { ... from an answer to this question: 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>

I think I'm getting my syntax wrong but I'm not sure where.

I also tried linking jQuery in the code via CDN, but this stopped the other jQuery elements on my page working that are from plugins, such as my navigation bar.

If anyone knows what I'm doing wrong and how to get around this issue, i'd greatly appreciate the help!

Answer 1

When I run this code, it throws:

Uncaught SyntaxError: Unexpected token (

---

 function ($)("#b")

… is a syntax error.

You use $ as the name of an argument and inside the function as a variable. You've skipped the bit where you create the body of the function with { and } and the bit where you put the function name ( $ ) before the (arguments) to it.

The syntax you are looking for is (I've split it up into clear, named functions instead of inlining everything).

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

… or the version where everything is inlined:

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

You are having syntax errors in your script please try to run this script.

<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>