Multiple registered events in JQuery

Question

Posted this over at the Drupal forums but haven't received a response. Basically, I have a simple JavaScript item I developed for another website that I'm trying to port over into Drupal. It's basically a div with three tabs stacked on top of each other and an image. When the user scrolls over a tab, the image changes (depending on the tab scrolled over).

The progress I've made is as follows.

$(document).ready(function () {

var imageOne = new Image(); imageOne.src = "images/slideshow/slideshow-image1.png";
var imageTwo = new Image(); imageTwo.src = "images/slideshow/slideshow-image2.png";
var imageThree = new Image(); imageThree.src = "images/slideshow/slideshow-image3.png";
var currentSlideshowImage = new Image();

$("#slideshow1").hover(
    function () {
        alert(imageOne.src);

        currentSlideshowImage = imageOne;
        document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;
        document.getElementById('slideshow1').className = "active";
        document.getElementById('slideshow2').className = "";
        document.getElementById('slideshow3').className = "";
    }
);

$("#slideshow2").hover(
    function () {
        alert(imageTwo.src);

        currentSlideshowImage = imageTwo;

        document.getElementById("slideshow-image-object").src = currentSlideshowImage.src;

        document.getElementById('slideshow2').className = "active";
        document.getElementById('slideshow1').className = "";
        document.getElementById('slideshow3').className = "";
    }
);

});

Looking at the above code, there is a function attached to the hover event of two elements. For some reason, only the first event added will work. If I hover over slideshow1, the function calls as expected however slideshow2 does nothing. If I was to modify the code and move slideshow2 before slideshow1, the hover event on slideshow2 will run as expected however slideshow1 will do nothing.

Am I missing something simple here? Is this how I'd go about adding events to elements in my theme (this code is stored in an external file referenced in the .info theme file)? Any help at this point will be greatly appreciated.

Any ideas what's going on?

Answer 1

bits of advice

wrap your code up neatly.

and read this for info if you havent already

http://api.jquery.com/category/events/

events in jquery are a little tricky.

good luck.

Answer 2

try declaring your variables outside of the $.ready() function.

Also I suggest you more fully embrace jQuery than you have so far. much of your code could be done much more succinctly

Answer 3

JQuery.hover() requires two arguments: a function to call on 'enter' and another on 'leave'. The problem arrives when you leave the element, JQuery tries to call on null and throw an error. Try this instead (I've also taken the liberty of cleaning up your code to avoid repeating... yes, your code has useless repetitions) :

$(document).ready(function () {

// { elementId: url, ... }
var imgs = {
   'slideshow1': 'images/slideshow/slideshow-image1.png',
   'slideshow2': 'images/slideshow/slideshow-image3.png',
   'slideshow3': 'images/slideshow/slideshow-image3.png'
};
var currentSlideshowImage;  // no need to initialize now

$.each(imgs, function(id,url) {
   var img = new Image(); img.src = url;
   $('#' + id).hover(
      function() {
         currentSlideshowImage = img;
         $('#lideshow-image-object').attr('src', img.src);
         $(this).addClass('active');
      },
      function() {
         currentSlideshowImage = null;  // no image selected ?
         $(this).removeClass('active');
      }
   );
});

});  // JQuery.ready

You can add images to your slideshow using the convenient imgs object.