This is very simple i am sure but i am new to jquery and am kinda stuck.

I wrote this code which works perfectly:

function engageMaps(){
  $(".destinations #cancun").hover(
    function () {
      $(".image_map #cancunPin").addClass("active");
    },
    function () {
      $(".image_map #cancunPin").removeClass("active");
    }
  );
};

Then I tried to break items out into variables to make it more flexible but can't get it to work. I wrote this:

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var pin = $(".image_map #cancunPin");
  $destination.hover(
    function () {
      $pin.addClass("active");
    },
    function () {
      $pin.removeClass("active");
    }
};

This should be exactly the same as the first code block. Any help is much appreciated thanks

This is very simple i am sure but i am new to jquery and am kinda stuck.

I wrote this code which works perfectly:

function engageMaps(){
  $(".destinations #cancun").hover(
    function () {
      $(".image_map #cancunPin").addClass("active");
    },
    function () {
      $(".image_map #cancunPin").removeClass("active");
    }
  );
};

Then I tried to break items out into variables to make it more flexible but can't get it to work. I wrote this:

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var pin = $(".image_map #cancunPin");
  $destination.hover(
    function () {
      $pin.addClass("active");
    },
    function () {
      $pin.removeClass("active");
    }
};

This should be exactly the same as the first code block. Any help is much appreciated thanks

• javascript
• jquery
• function
• variables

• your variable is $pin in one place and pin in another. – jbabey Commented May 25, 2012 at 18:12

3 Answers 3

You are missing ); for .hover..

$destination.hover(
   function () {
     $pin.addClass("active");
   },
   function () {
     $pin.removeClass("active");
   }
);

Also you missed $. See below.

var $pin = $(".image_map #cancunPin");

Full code:

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var $pin = $(".image_map #cancunPin"); //Added $ to pin var name as that is how it is referenced below

  $destination.hover(
    function () {
      $pin.addClass("active");
    },
    function () {
      $pin.removeClass("active");
    }
   ); //this was missing
} //removed semicolon as it is not necessary

    v---------- You forgot this
var $pin = $(".image_map #cancunPin");

And also you are missing ); for .hover.

So, the final version of the code:

function engageMaps() {
    var $destination = $(".destinations #cancun");
    var $pin = $(".image_map #cancunPin");
    $destination.hover(
        function() {
            $pin.addClass("active");
        }, function() {
            $pin.removeClass("active");
        }
    );
};​

$destination.hover(
    function () {
      $pin.toggleClass("active");
    });

So plete code is:

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var $pin = $(".image_map #cancunPin"); // you use pin instead of $pin
  $destination.hover(
    function () {
      $pin.toggleClass("active");
  });
};