Jquery mouseenter問題

我是一名jQuery初學者。我有n個divs，如果我在他們上面懸停另一個div將會淡入淡出。像這樣：Jquery mouseenter問題

$(".res2").mouseenter(function() { 
     $("#jucInfores2").fadeIn("normal"); 
    }); 
    $(".res3").mouseenter(function() { 
     $("#jucInfores3").fadeIn("normal"); 
    }); 
    $(".res4").mouseenter(function() { 
     $("#jucInfores4").fadeIn("normal"); 
    }); 
    $(".res5").mouseenter(function() { 
     $("#jucInfores5").fadeIn("normal"); 
    }); 
    $(".res6").mouseenter(function() { 
     $("#jucInfores6").fadeIn("normal"); 
    }); 
    $(".res7").mouseenter(function() { 
     $("#jucInfores7").fadeIn("normal"); 
    }); 
    $(".scl").mouseenter(function() { 
     $("#jucInfoscl").fadeIn("normal"); 
    }); 
    $(".scc").mouseenter(function() { 
     $("#jucInfoscc").fadeIn("normal"); 
    }); 
    $(".scr").mouseenter(function() { 
     $("#jucInfoscr").fadeIn("normal"); 
    }); 
    $(".ml").mouseenter(function() { 
     $("#jucInfoml").fadeIn("normal"); 
    }); 
    $(".mcl").mouseenter(function() { 
     $("#jucInfomcl").fadeIn("normal"); 
    });

有另一種方式爲我不重複那麼多次的代碼做到這一點？如果我有20個這樣的div例如？

來源

2011-08-15 hhh3112

我建議你顛倒邏輯和匹配#jucInfo元素替代，然後用自己的ID的可變部分建類選擇：

$("[id^='jucInfo']").each(function() { 
    var $info = $(this); 
    $("." + this.id.substr(7)).mouseenter(function() { 
     $info.fadeIn("normal"); 
    }); 
});

來源

2011-08-15 10:37:39

+1：好主意.. –

很好的答案，謝謝。在第一行中，引號需要交換才能工作。「[id^='jucInfo']」需要更改爲'[id^=「jucInfo」]' – hhh3112

@ hhh3112，實際上，他們沒有。在這種情況下，屬性選擇器內的引號甚至是可選的。看[這個小提琴]（http://jsfiddle.net/3ddrS/）。 –

一種方法是包主代碼中JavaScript函數（爲便於閱讀，非常字面爲例）：

function jucInfo(res, infores) { 
    $(res).mouseenter(function() { 
     $(infores).fadeIn("normal"); 
    }); 
}

到你可以通過所有的變量，當你調用該函數：

jucInfo(".res2", "#jucInfores2"); 
jucInfo(".res3", "#jucInfores3"); 
...

要進一步優化，請將所有選擇器類和ID對放在hash中，然後進行循環，重複上述所需的次數。散列中元素的數量）。

來源

2011-08-15 10:38:16

Jquery mouseenter問題

回答

相關問題