重複使用jQuery選擇器而不是構建它兩次？

剛開始使用jQuery。我在這裏結束了一些難看的代碼，以動態更改世界地圖各個區域的背景。我爲mouseover和mouseout構建相同的選擇器兩次。（這就是hover所做的：將兩者結合...是嗎？）有沒有更簡單的方法來做到這一點？也就是說，只建立一次，並能夠用於兩者？重複使用jQuery選擇器而不是構建它兩次？

$('.regionName').hover( 
    function() { 
    var id = $(this).attr("id"); 
    id = (id.substring(0, 2)); 
    var region = "#" + id + "BG"; 
    $(region).css('background', 'url(images/world-map-' + id + '.png) no-repeat'); 
    }, 
    function() { 
    var id = $(this).attr("id"); 
    id = (id.substring(0, 2)); 
    var region = "#" + id + "BG"; 
    $(region).css('background', 'none'); 
    } 
);

來源

2012-07-27 user1366794

而不是.css方法，創建一個自定義類，並使用.toggleClass()。然後，您可以將您的兩個功能於一體：

$('.regionName').hover( 
    function() { 
    var id = $(this).attr("id"); 
    id = (id.substring(0, 2)); 
    var region = "#" + id + "BG"; 
    $(region).toggleClass('addbg-'+id); // add on mouseover, remove on mouseout 
    } 
);

現在所有的相關.addbg-<whatever>類添加到您的樣式表，你是好去。

來源

2012-07-27 18:55:07 Blazemonger

如果他有數百個ID的？樣式表會很長 – sksallaj 2012-07-27 19:38:38

你是對的。但是，OP並沒有說這種或那種。 – Blazemonger 2012-07-30 12:57:50

我知道，但在我看來，這並不重要，我們必須提供長期解決方案和抽象概念，以指出人們正確的方向。僅僅因爲「它的正確答案」或者「它有效」而解決可能會產生風險。如果我們意識到這些風險，就必須提及它們。就我個人而言，我喜歡你的解決方案:)這是我會走的一種方法。 – sksallaj 2012-07-30 16:52:55

$('.regionName').on('mouseenter mouseleave', function(e) { 
    var id = this.id.substring(0, 2); 
    $("#" + id + "BG").css('background', e.type==='mouseenter'?'url(images/world-map-' + id + '.png) no-repeat':'none'); 
});

從jQuery docs：

調用$（選擇）.hover（handlerIn，handlerOut）可以簡寫：

$（選擇）.mouseenter（handlerIn）.mouseleave（ handlerOut）;

來源

2012-07-27 18:56:06 adeneo

而不是使緊湊的代碼，我寧願可讀性：

$('.regionName').hover( 
    function() { 
     var id = $(this).attr("id"); 
     regionHelper(id); 
}); 

//performs the toggle 
function regionHelper(id){ 
    id = id.substring(0, 2); 
    var region = "#" + id + "BG"; 
    var element = $('#' + id); 
    if (element.css('background').length == 0){ 
     element.css('background', 'url(images/world-map-' + id + '.png) no-repeat'); 
    } else { 
     element.css('background', ''); 
    } 
}

來源

2012-07-27 20:06:42 sksallaj

重複使用jQuery選擇器而不是構建它兩次？

回答

相關問題