Is there an alternative to using if or case in jQuery?

Question

I have about 10 pictures, when :hover each picture there is an ajax.load that will be trigger. I am about to do 10 jquery.hover, but something tells me there is a better solution.

I was thinking about somthing like

case 1 : load a
case 2 : load b
case 3 : load c
etc...

How would I do this in jquery?

Understand the 10 different picture with 10 different text must be loaded in the <div> so now i am doing

$('#a).hover.load('file' #tx-a');
$('#b).hover.load('file' #tx-b');
$('#c).hover.load('file' #tx-c');

Answer 1

In jQuery you can bind hover event to all of them at once

$("img").hover(function(e) {
    // triggered when mouse enters the element
    // here you can load picture by Ajax
}, function(e) { 
    // triggered when mouse leaves the element

    // unload picture or do whatever else ...
});

You can get reference to current image element via $(this)

Answer 2

Here's a simple example for you:

<p id="status">&nbsp;</p>
<img class="viewable" id="unique" src="foo.jpg"/><br/>
<img class="viewable" id="id" src="foo.jpg"/><br/>
<img class="viewable" id="for" src="foo.jpg"/><br/>
<img class="viewable" id="each" src="foo.jpg"/><br/>
<img class="viewable" id="element" src="foo.jpg"/><br/>

<script type="text/javascript">
  $(function() {
    var stuff = ['hello', 'world', 'you', 'look', 'nice'];

    $('.viewable').hover(
      // triggered when mouse moves onto element
      function() {
        var index = $('.viewable').index(this);

        // Replace this next line with a jQuery AJAX call. Pass the index 
        // as a parameter to whatever location you are pulling the text 
        // from, and have the AJAX callback stuff the text into the 
        // #status element. This is just a placeholder.
        $('#status').html('Hover IN, index ' + index + ' (' + stuff[index] + ')');
      },
      // triggered when mouse move off of element
      function() {
        // Optional: clear status element when mouse moves off image
        $('#status').html('&nbsp;');
      }
    );
  });
</script>

Answer 3

You could use the following:

$('img').hover(function (e) { ... }, function (e) { ... });

The e in each of the functions represent the event object for the mouseover and the mouseout event respectively. To find out which of the images it triggered for, use $(this).

Some people (including myself) have had problem with using the hover() function because it doesn't always register mouseout events correctly. Maybe this has been fixed in the later versions, but I usually do $('img').mouseover(...).mouseout(...) instead to be sure.

Answer 4

I would definately recommend using some sort of shared function for this. There are two recommendations that I would make.

Option 1. Setup a plugin and then bind all 10 to the plugin.

(function($) {
  $.fn.loadImageOnHover = function(image) {
    return $(this).hover(function() {
        // load the image using ajax
      }, function() {
        // unload
      });
  };
})(jQuery);

$('#image1').loadImageOnHover('image.jpg');
$('#image2').loadImageOnHover('image2.jpg');
$('#image3').loadImageOnHover('image3.jpg');
$('#imageN').loadImageOnHover('image4.jpg');

Option 2. Setup a common function and use an attribute, the hash, or index as mentioned by William Brendel

$('.hoverImage').hover(function() {
  var image = this.hash.replace('#','');
  alert(image);
  // load via ajax
}, function() {
  // unload
});

<a href="#image1.jpg" class="hoverImage">Hover</a>
<a href="#image2.jpg" class="hoverImage">Hover</a>
<a href="#image3.jpg" class="hoverImage">Hover</a>
<a href="#imagen.jpg" class="hoverImage">Hover</a>

Answer 5

base on work from : William Brendel, here is the final code

<script type="text/javascript">
$(document).ready(function () {


    $('#equipe-gens img').hover(
      function() {
        myID=$(this).attr('id');
        $('#equipe-profile').load('equipedecourse.html #' + myID);
        $('#'+myID).css('border','2px solid red');
             },
      function() { 
         $('#'+myID).css('border','2px solid #000000');
         $('#equipe-profile').html("<h1>Profil</h1><p>Pour voir le profile des membre de l'équipe, sélectinnez-les</p>");
            }
    );
  });
</script>