Улучшить фрагмент jQuery для не DRY

Question

У меня есть фрагмент JQuery, который отлично работает с моей картиной-картой, которая наводится на карту при наведении на навигационное меню. Но я должен использовать код снова и снова (DRY) для каждого идентификатора или класса. Вот мой код jQuery на jsfiddle, но я не сделал его работу в jsfiddle.

jsfiddle.

<a id="hoverlink1" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 
<a id="hoverlink2" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 
<a id="hoverlink3" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 

<div id="hover1">hover this id</div> 
<div id="hover2">hover this id</div> 
<div id="hover3">hover this id</div> 

Этот код то, что у меня есть сейчас, и это работает, но я должен сделать DRY на everey ид

$('#hoverlink1').mouseover(function(e) { 
     $('#hover1').mouseover(); 
    }).mouseout(function(e) { 
     $('#hover1').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

Может быть, это должно выглядеть примерно так. Это одна работа dosen't это только идея от меня

$(this).data('id').mouseover(function(e) { 
       var target = $(this).data("target"); 
       $(target).mouseover(); 
      }).mouseout(function(e) { 
       var target = $(this).data("target"); 
       $(target).mouseout(); 
      }) 

Есть ли способ улучшить это, так что я не должен СУХОЙ

Answer 1

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

$(".hoverlink").on("mouseenter mouseleave", function(e) { 
    var num = this.id.match(/\d+$/)[0]; 
    var color = e.type === "mouseenter" ? "red" : "black"; 
    $("#hover" + num).css("color", color); 
}).on("click", function(e) { 
    e.preventDefault(); 
}); 

Работа демо: http://jsfiddle.net/jfriend00/o0y94bhm/

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

Answer 2

Вы можете использовать class вместо этого. В то время как id s должны быть уникальными на странице, class es может быть повсеместно.

HTML

<a id="hoverlink1" class="hoverDelegate" data-target="hover1" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 
<a id="hoverlink2" class="hoverDelegate" data-target="hover2" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 
<a id="hoverlink3" class="hoverDelegate" data-target="hover3" href="#">mouse over this to trigger a hilight from an external element!</a> 
<br /> 

<div id="hover1">hover this id</div> 
<div id="hover2">hover this id</div> 
<div id="hover3">hover this id</div> 

JQuery

$('.hoverDelegate').on({ 
    mouseover: function (e) { 
     var delegateId = $(this).data('target'); 

     $('#' + delegateId).mouseover(); 
    }, 
    mouseout: function (e) { 
     var delegateId = $(this).data('target'); 

     $('#' + delegateId).mouseover(); 
    }, 
    click: function (e) { 
     e.preventDefault(); 
    } 
});