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

回答

相关问题