代碼簡化

Question

我使用了jQuery插件maphighlight與地圖上的美國

我有幾個國家是太小，無法把自己的縮寫他們，所以我必須把他們的身邊。

我已經做過的事情是，當用戶懸停在縮寫上時，相應的狀態會突出顯示。這工作正常。

我的問題是，儘管代碼有效，但它對我來說看起來太重複了，我試圖簡化/優化它，但是我得到的錯誤是所有縮寫都會突出顯示單個狀態，而不是相應的一個。

下面的代碼我到目前爲止：

$(function() { 
    $('.map').maphilight(); 

    $('#ma-link').mouseover(function(e) { 
     $('#ma').mouseover();  
     }).mouseout(function(e) { 
      $('#ma').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 

    $('#ri-link').mouseover(function(e) { 
     $('#ri').mouseover();  
     }).mouseout(function(e) { 
      $('#ri').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
    $('#ct-link').mouseover(function(e) { 
     $('#ct').mouseover();  
     }).mouseout(function(e) { 
      $('#ct').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 

    $('#nj-link').mouseover(function(e) { 
     $('#nj').mouseover();  
     }).mouseout(function(e) { 
      $('#nj').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 

    $('#de-link').mouseover(function(e) { 
     $('#de').mouseover();  
     }).mouseout(function(e) { 
      $('#de').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 

    $('#md-link').mouseover(function(e) { 
     $('#md').mouseover();  
     }).mouseout(function(e) { 
      $('#md').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 

    }); 

有沒有辦法簡化這個？

任何幫助，這將不勝感激。

謝謝。

Answer 1

不需要更改您的HTML。用這個替換你的塊。

$(function() { 
    $('.map').maphilight(); 

    $('[id$="-link"]').each(function() { 
     var child = $("#" + this.id.substr(0,2)); 
     $(this).mouseover(function() { 
      child.mouseover(); 
     }).mouseout(function() { 
      child.mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
    }); 
}); 

Answer 2

添加一個共享類，如'mapItem'，並附加東西到this對象。

$('.mapItem').mouseover(function(e) { 
     $(this).find(selector).mouseover();  
    }).mouseout(function(e) { 
     $(this).find(selector).mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

Answer 3

只是做一個功能，通過國家的ID，很簡單：

function hoverState(state) 
    $('#'+state+'-link').mouseover(function(e) { 
     $('#'+state).mouseover();  
     }).mouseout(function(e) { 
      $('#'+state).mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
} 

Answer 4

如果你把一個類上太小，你可以做到這一點，指出：

 
$('.too_small').mouseover(function(e) { 
     $(this).find('.abbr').mouseover();  
     }).mouseout(function(e) { 
      $(this).find('.abbr').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
 

其中.too_small與$（'＃ri-link'）在同一元素上，而.abbr在$（'＃ri-link'）元素上

Answer 5

通常，e asier辦法是分配rel屬性相關的變量，然後只用一個毯子分配：

$('.link').mouseover(function(e) 
{ 
    id = $(this).attr('rel'); 

    $('#' + id).mouseover(); 
}).mouseout(function(e) 
{ 
    id = $(this).attr('rel'); 

    $('#' + id).mouseout(); 
}).click(function(e) 
{ 
    e.preventDefault(); 
}); 

Answer 6

你可以解壓縮到一個jQuery插件：

(function($) { 

    $.fn.bindMice = function(relevantSelector) { 
     return this 
      .mouseover(function(e) { 
       $(relevantSelector).mouseover();  
      }) 
      .mouseout(function(e) { 
       $(relevantSelector).mouseout(); 
      }) 
      .click(function(e) { e.preventDefault(); }); 
    }); 

})(jQuery); 

然後，您可以使用像這樣：

$('#ma-link').bindMice('#ma'); 
$('#ri-link').bindMice('#ri'); // and so on.. 

這只是一種方式，還有很多。