Question

我正在研究jquery上的工具提示，我只是想弄清楚如何最小化编码。

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

当您悬停第一个img时，您会先看到ID为list的列表项。现在，当我想添加第二个时，对于第二个img，我必须复制整个代码，这将是很多代码而不是很简单。有没有更简单的方法呢？

Answer 1

只需创建一个接受img的函数和与之关联的div。像我下面的东西。

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

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

Answer 2

向您的img添加一个数据属性，其中包含您要显示/隐藏的关联ID：并使用data()。

试试这个

<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();
  }
 );

Jquery，悬停并显示正确的div

2 个答案: