Comment consolider mon code jQuery répétitif en une seule fonction?

Question

jQuery débutant ici.

Voici ce sur quoi je travaille. J'ai une carte de zone avec 10 hotspots dessus. Passez la souris sur chacun des hotspots et déplacez l'arrière-plan du div (id = dialpad) pour afficher d'autres données (dans un sprite).

Le code que j'ai actuellement fonctionne, mais j'ai une fonction séparée pour chaque ID de point d'accès.

Ex:

$('#dial1') 
    // On mouse over, move the background on hover 
    .mouseover(function() { 
    $('#dialpad').css('backgroundPosition', '0 -120px'); 
    }) 
    // On mouse out, move the background back 
    .mouseout(function() { 
    $('#dialpad').css('backgroundPosition', '0 0'); 
    }) 
    $('#dial2') 
    // On mouse over, move the background on hover 
    .mouseover(function() { 
    $('#dialpad').css('backgroundPosition', '0 -240px'); 
    }) 
    // On mouse out, move the background back 
    .mouseout(function() { 
    $('#dialpad').css('backgroundPosition', '0 0'); 
    }); 
    ... 

Ce que je veux faire est de consolider ce code dans une fonction unique où je passe simplement le chiffre décalage vertical de chaque ID de zone.

Quelqu'un peut-il vous aider?

Answer 1

$('#dial1,#dial2').hover(
    function() { changePosition('0 ' + (parseInt(this.id.match(/\d+$/)[0])) * -120 + 'px'); }, 
    function() { changePosition('0 0'); } 
); 

function changePosition(position) { 
    $('#dialpad').css('backgroundPosition', position); 
} 

---

Mise à jour:

Par ailleurs, si les « points chauds » se produisent sur la page dans le même ordre que les numéros d'index, vous pouvez alors prendre une approche légèrement plus efficace et donnez-leur tous une classe et utilisez la propriété index de .each() pour déterminer le bon numéro d'index.

$('.hotspots').each(function(idx) { 
    $(this).hover(
     function() { changePosition('0 ' + ((idx + 1) * -120) + 'px'); }, 
     function() { changePosition('0 0'); } 
    ); 
}); 

function changePosition(position) { 
    $('#dialpad').css('backgroundPosition', position); 
} 

En fait, vous avez vraiment besoin de ne pas la fonction changePosition() si vous ne voulez pas. Le code est assez court pour qu'un peu de répétition ne soit pas un gros problème.

$('.hotspots').each(function(idx) { 
    $(this).hover(
     function() { $('#dialpad').css('backgroundPosition', '0 ' + ((idx + 1) * -120) + 'px')}, 
     function() { $('#dialpad').css('backgroundPosition', '0 0'); } 
    ); 
});​ 

Answer 2

function setupDial(selector, offset) { 
    function resetPos() { 
    $('#dialpad').css('backgroundPosition', '0 0'); 
    } 
    function setPos(int p) { 
    return function() { 
     $('#dialpad').css('backgroundPosition', '0 ' + p + 'px'); 
    } 
    } 

    $(selector) 
    // On mouse over, move the background on hover 
    .mouseover(setPos(offset)) 
    // On mouse out, move the background back 
    .mouseout(resetPos); 
} 

setupDial('#dial1', -120); 
setupDial('#dial2', -240); 

Answer 3

est de façon Cleanest faire un plugin rapide:

(function($){ 
    $.fn.mysprite = function(options){ 
    //merge the provided options with defaults 
    var o = $.extend($.fn.mysprite.defaults, options||{}); 

    // this is the main body, here we iterate over the set 
    // returned by the selector applying the new functionality 

    this.each(function(){ 
     switch(typeof o.target){ 
     case 'object': 
     case 'string': 
      var target = $(o.target); 
      break; 
     case null: 
      var target = $(this); 
      break; 
     default: 
      // no target specified! 
      return this; 
     } 

     //simplify your previous code with the hover method 

     $(this).hover(
     function(){ 
      target.css('backgroundPosition', o.offsetIn); 
     }, 
     function(){ 
      target.css('backgroundPosition', o.offsetOut); 
     }); 
    }); 

    return this; 
    }; 

    // setsup class defaults 
    $.fn.mysprite.defaults = { 
    offsetIn: '0 0', 
    offsetOut: '0 0', 
    target: null 
    }; 
})(jQuery); 

//invoke with 

$('#dialpad1').mysprite({offsetIn: '0 100', offsetOut: '0 0', target: '#dialpad'}); 

Answer 4

Voici une variation en utilisant des fermetures/générateurs de fonctions pour les callbacks:

function setOffset(offset) { 
    return (function() { $('#dialpad').css('backgroundPosition', offset); }); 
}  
$('#dial1,#dial2').each(function(i) { 
    $(this).hover(setOffset('0 -' + (120 * (i+1)) + 'px'), setOffset('0 0')); 
});