Как объединить мой повторяющийся код jQuery в одну функцию?

Question

JQuery новичок здесь.

Вот над чем я работаю. У меня есть карта местности с 10 точками доступа. Наведите указатель мыши на каждую из горячих точек, и она смещает фон div (id = dialpad) для отображения других данных (в спрайте).

Код, который у меня есть на данный момент, работает, но у меня есть отдельная функция для каждого идентификатора точки доступа.

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');
   });
   ...

То, что я хочу сделать, - это объединить этот код в одну функцию, в которой я просто передаю значение вертикального смещения из каждого идентификатора области.

Может ли кто-нибудь помочь?

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);
}

---

Обновление:

В качестве альтернативы, если «горячие точки» появляются на странице в том же порядке, что и номера индексов, тогда вы могли бы воспользоваться несколько более эффективным подходом, назначить им всем класс и использовать свойство index .each() для определить правильный порядковый номер.

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

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

На самом деле, вам действительно не нужна функция changePosition(), если она вам не нужна. Код достаточно короткий, поэтому небольшое повторение не имеет большого значения.

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

Answer 2

Вот вариант, использующий замыкания / генератор функций для обратных вызовов:

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'));
});

Answer 3

Самый простой способ сделать быстрый плагин:

(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

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);