jquery，懸停並顯示正確的div

我正在jQuery上的工具提示類的事情，我只是無法弄清楚如何最小化編碼。jquery，懸停並顯示正確的div

$("#rightc img:first").hover(
function() { 
    $("ul #first").show(); 
    }, 
    function() { 
    $("ul #first").hide(); 
    } 
);

當您懸停第一個img時，您會看到帶有id的列表項。現在，當我想添加第二個，對於第二個img我必須複製整個代碼，這將是很多代碼，並不是很簡單。有沒有更簡單的方法來做到這一點？

來源

2013-05-01 user2336174

請把你的相關的HTML代碼,, – bipen 2013-05-01 17:03:22

四upvotes在兩分鐘內爲這個？ – j08691 2013-05-01 17:04:07

我會在一秒鐘內得到一個jsfiddle。 – user2336174 2013-05-01 17:04:49

只需製作一個接受img和您與之關聯的div的函數即可。就像我下面的東西。

tooltipHover = function(img,div){ 
    $(img).hover(
     function() { 
      $(div).show(); 
     }, 
     function() { 
      $(div).hide(); 
     } 
    ); 
}; 

tooltipHover("#rightc img:first","ul #first");

來源

2013-05-01 17:07:10 rwilliams

謝謝，這使得功能幾乎最小化。祝你今天愉快。 – user2336174 2013-05-01 17:10:11

添加一個數據屬性的IMG與要顯示/隱藏... 和使用data() UL的相關標識。

試試這個

<img src=".." data-ulID="first" /> 
<img src=".." data-ulID="second" /> 


$("#rightc img").hover(
    function() { 
    var id=$(this).data('ulID'); 
    $("ul #"+id).show(); 
    }, 
    function() { 
    var id=$(this).data('ulID'); 
    $("ul #"+id).hide(); 
    } 
);

來源

2013-05-01 17:10:24 bipen

jquery，懸停並顯示正確的div

回答

相關問題