Calling a jQuery Function from within .click()

Question

I am uncertain why this code is not functioning. The goal is to hide an image and show another one in its place when the user clicks .accent. The currently displayed image (which is shown on page load) is referenced by the class .ssi-hide.

Here is the jQuery:

    jQuery(document).ready(function($){
      // jQuery methods go here...

      var currentImage = '".ssi-hide"';

      $(".accent").click(function() {
         swapImage( currentImage, "#accent-img" );
      });
    }); //end jQuery

and here is the function:

    (function( $ ) {
        $.fn.swapImage = function( outPic, inPic ) {
            $( outPic ).fadeOut(200, function(){
            $( inPic ).fadeIn(400).css("display", "block").css("margin", "auto");
            });
            currentImage = inPic;
        };
    })( jQuery );

Chrome is notifying that: "Uncaught ReferenceError: swapImage is not defined" as well as "Uncaught Error: Syntax error, unrecognized expression: ".ssi-hide""

Thank you very much for any help.

$.fn.swapImage really should be $.swapImage since you're not acutally using the instance your defining it on. then you call $.swapImage instead of $(this).swapImage — TheRealMrCrowley
– TheRealMrCrowley, Commented Sep 28, 2017 at 20:23
also downvoter, why downvote? this question meets standards. it has all relevant code - properly formatted, is not subjective, and doesn't show a lack of research... — TheRealMrCrowley
– TheRealMrCrowley, Commented Sep 28, 2017 at 20:25
@TheRealMrCrowley, Thanks for mentioning the difference between $.fn.swapImage and $.swapImage. I had read it in a couple different sites when looking for an answer to this before I posted and it didn't make sense for some reason until I saw it worded that way. — Dominic Fox
– Dominic Fox, Commented Sep 29, 2017 at 0:02

TheRealMrCrowley · Accepted Answer · 2017-11-06 18:03:03Z

3

First, currentImage doesn't need two sets of quotes, use var currentImage = ".ssi-hide"; instead.

You're invoking the function as if it was a scoped function, but it's a jQuery plugin. instead of:

$(".accent").click(function() {
    swapImage( currentImage, "#accent-img" );
});

It ought to be:

$(".accent").click(function() {
    $(this).swapImage( currentImage, "#accent-img" );
});

But I don't see why you need to have it as a jQuery plugin since it doesn't use this anywhere.

Instead, it should really be defined as a class function

(function( $ ) {
    $.swapImage = function( outPic, inPic ) {
        $( outPic ).fadeOut(200, function(){
        $( inPic ).fadeIn(400).css("display", "block").css("margin", "auto");
        });
        currentImage = inPic;
    };
})( jQuery );

then you call

$(".accent").click(function() {
    $.swapImage( currentImage, "#accent-img" );
});

edited Nov 6, 2017 at 18:03

TheRealMrCrowley

9767 silver badges24 bronze badges

answered Sep 28, 2017 at 19:55

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dominic Fox Over a year ago

Got it. Thank you for the comment, that resolved one of the browser errors. Now I am left dealing with a syntax error pointing to ".ssi-hide" which I can't seem to understand.

TheRealMrCrowley Over a year ago

@DominicFox that's because you'r double quoting it. you don't need the inner quotes in currentImage

Rosmarine Popcorn Over a year ago

@DominicFox than please mark this question as the correct one

Dominic Fox Over a year ago

looking at the meta thread to figure out how to mark an answer as correct I didn't forget, just a new user :D

Shabi Levi · Accepted Answer · 2017-09-29 04:29:16Z

0

Using onclick creates an attribute, and its value should be a string that refers to a function, not an actual function. Using click creates a property on the element, and its value should be the function itself.

jQuery(document).ready(function($){
          // jQuery methods go here...

          var currentImage = $(".ssi-hide");

          $(".accent").on("click",function() {
             $(this).swapImage( currentImage, "#accent-img" );
          });
        }); //end jQuery

edited Sep 29, 2017 at 4:29

answered Sep 28, 2017 at 19:56

Shabi Levi

2681 gold badge2 silver badges13 bronze badges

1 Comment

FluffyKitten Over a year ago

Code-only answers are discouraged because they do not explain how they resolve the issue in the question. Consider updating your answer to explain what this does and how it addresses the problem - this will help not just the OP but others with similar issues. Please review How do I write a good answer

Collectives™ on Stack Overflow

Calling a jQuery Function from within .click()

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related