Функции соединения вместе - код чистки

Question

Есть ли способ сократить код. Мне нужно добавить еще 15 функций, которые все делают одно и то же.

$(document).ready(function() { 
    $('.map-highligh').maphilight({ 

    }); 

    //north roll over 
    $('#hilightlink').mouseover(function(e) { 
     $('#north').mouseover(); 
    }).mouseout(function(e) { 
     $('#north').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

    //Wellington roll over 
    $('#hilightlink-wel').mouseover(function(e) { 
     $('#wellington').mouseover(); 
    }).mouseout(function(e) { 
     $('#wellington').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

}); 

Answer 1

Вы можете пересмотреть свой пользовательский интерфейс для этого, но вы могли бы сделать что-то вроде этого:

function mouseBind(bound, affected) { 
    $('#' + bound) 
     .mouseover(function() { 
     $('#' + affected).mouseover(); 
     }) 
     .mouseout(function() { 
     $('#' + affected).mouseout(); 
     }) 
     .click(function (e) { e.preventDefault(); }) 
    ; 
} 

mouseBind('hilightlink', 'north'); 
mouseBind('hilightlink-wel', 'wellington'); 

Answer 2

Вы можете использовать эту функцию без изменений в HTML-коде:

function bind_block(button, element) { 
    button.mouseover(function(e) { 
    element.mouseover(); 
    }).mouseout(function(e) { 
    element.mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 
} 

bind_block($('#hilightlink'), $('#north')); 
bind_block($('#hilightlink-wel'), $('#wellington')); 

Если вам нужно связать эти события для 15 разных элементов, для этого лучше использовать классы CSS. Пожалуйста, предоставьте свой HTML-код, чтобы получить дополнительную помощь.

Answer 3

Вы можете использовать немного композиции для очистки кода.

function makeTrigger(id, eventName) { 
    return function(e) { 
     $('#' + id).trigger(eventName); 
    }; 
} 

function prevent(e) { 
    e.preventDefault(); 
} 

$('#hilightlink') 
.mouseover(makeTrigger("north", "mouseover")) 
.mouseout(makeTrigger("north", "mouseout")) 
.click(prevent); 

Answer 4

$.fn.rollOver = function(selector) { 
    this.on('mouseover mouseout', function(e) { $(selector).trigger(e.type); }); 
    this.on('click', function(e) { e.preventDefault(); }); 
    return this; 
} 
$('#hilightlink').rollOver('#north'); 
$('#hilightlink-wel').rollOver('#wellington'); 

Answer 5

Не видя, что DOM отношения, которые мы могли бы использовать, чтобы использовать это на пользу, я бы поместить данные в таблицу и итерацию над столом, так что есть только одна копия кода, и вы можете добавить/удалять/изменять идентификаторы без изменения исполняемого кода:

var hoverItems = [ 
    "highlightlink", "north", 
    "highlightlink-wel", "wellington" 
]; 

for (var i = 0; i < hoverItems.length; i+= 2) { 
    (function(item$) { 
     $("#" + hoverItems[i]).hover(function() { 
      item$.mouseover(); 
     }, function() { 
      item$.mouseout(); 
     }).click(function(e) {e.preventDefault();}); 
    })($(hoverItems[i+1])); 
} 

Или, немного другой способ, с помощью таблицы поиска:

var hoverItems = { 
    "highlightlink": "north", 
    "highlightlink-wel": "wellington" 
}; 

$("#" + Object.keys(hoverItems).join(", #")).hover(function() { 
    $("#" + hoverItems[this.id]).mouseover(); 
}, function() { 
    $("#" + hoverItems[this.id]).mouseout(); 
}).click(function(e) {e.preventDefault();}); 

Этот второй метод требует ES5 или ES5 shim для метода Object.keys().

Чтобы добавить дополнительные элементы с помощью одного из этих методов, просто добавьте больше элементов в таблицу данных - вы не будете писать одну новую строку исполняемого кода.