lol, похоже, что это может быть примерно такого же размера или длиннее, чем ваш код, но определенно суше.

Спасибо @Andy за указание на снижение производительности в предыдущей версии с использованием $(...).each.

var regions = ['americas', 'europe', 'middleEast'];

$.each(regions, function(region) {
    var trigger = id(region, 'Trigger');
    var image = id(region, 'Image');

    $(trigger).hover(
        effect(image, 'fadeIn'),
        effect(image, 'fadeOut'),
    );
});

function effect(selector, method) {
    return function() {
        $(selector)[method]();
    };
}

function id(prefix, suffix) {
    return '#' + prefix + suffix;
}

Если вы можете изменить HTML, я бы закодировал все знания в самой странице, и просто использовал jQuery для настройки событий hover.

<div class='trigger' data-image='#americasImg'>
   ..
</div>
<div class='trigger' data-image='#europeImg'>
  ..
</div>

Javascript

function imageId(elem) {
    return $(elem).attr('data-image');
}

// Using the fade function from before
$('.trigger').hover(
    effect(imageId(this), 'fadeIn'),
    effect(imageId(this), 'fadeOut')
);

Поскольку похоже, что вы получаете доступ только к уникальным идентификаторам , лучше всего использовать поисковую таблицу IMO.

var lookmeup = [  [$('#americasTrigger'), $('#americasImg')],
                  [$('#europeTrigger'), $('#europeImg')],
                  [$('#middleEastTrigger'), $('#middleEastImg')]
               ];

$.each(lookmeup, function(index, element){
    element[0].hover(function(){
      element[1].fadeIn();
    }, function(){ 
      element[1].fadeOut();
    });
});

СУХОЙ! все сделано!

Еще один способ сделать это более эффективным - использовать делегирование событий .

Если все ваши элементы hover имеют одинаковый TAG , этот подход может быть полезен:

$(document.body).delegate('div', 'mouseenter', function(e){
     $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeIn();
});

$(document.body).delegate('div', 'mouseleave', function(e){
     $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeOut();
});

Предполагая, что все ваши элементы « hoverable » были DIV с. Вы все равно должны дать этим элементам имя класса , чтобы нацелены были только эти определенные элементы.

Имеет смысл ограничить корневой элемент для delegate () . Здесь я использую document.body , что и .live () . Самое замечательное в .delegate () заключается в том, что если ваши элементы при наведении курсора используют один родительский узел, вы можете применить delegate () к этому узлу. Таким образом вы уменьшите количество связанных обработчиков событий

(2 вместо 6).

Или, чтобы упростить задачу, добавьте класс маркера, например, «fadingImage», к каждому из изображений, а затем используйте этот код ...

$('.fadingImage').hover( 
    function () { 
        $(this).fadeIn() 
    }, 
    function(){ 
        $(this).fadeOut() 
    } 
); 

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

Обновление: Нет, я проснулся (спасибо, jAndy & Reigel!), Я исправлю свой пост, чтобы учесть тот факт, что зависший элемент не тот, который исчезает.

Не имея какой-либо примерной разметки, мне придется сделать некоторые предположения, но исходный плакат может захотеть предоставить реальную разметку, чтобы поместить вещи в контекст.

<div>
    <span class="fadingTrigger">first text to hover over<span>
    <img class="fadingImage" src="..." alt="first image to be faded"/>
<div>
<div>
    <span class="fadingTrigger">second text to hover over<span>
    <img class="fadingImage" src="..." alt="second image to be faded"/>
<div>

$('.fadingTrigger').hover( 
    function () { 
        $(this).parent().find(".fadingImage").fadeIn() 
    }, 
    function(){ 
        $(this).parent().find(".fadingImage").fadeOut() 
    } 
); 

В зависимости от структуры разметки метод поиска fadingImage, связанного с fadingTrigger, может варьироваться, но, имея некоторую четко определенную структуру, он должен быть надежным.

Причина, по которой я предпочитаю этот метод использованию массива идентификаторов для поиска элементов, заключается в том, что любые добавления к разметке потребуют изменений в javascript - это будет особенно проблематично, если разметка создается динамически. JavaScript также может быть динамически сгенерирован, чтобы включать соответствующий массив значений, но это нарушит принцип DRY.