jquery - Jquery，悬停并显示正确的div

Question

我正在处理 jquery 上的工具提示之类的东西，我只是不知道如何最小化编码。

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

当您悬停第一个 img 时，您会首先看到带有 id 的列表项。现在，当我想添加第二个时，对于第二个 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 添加一个数据属性，其中包含您想要显示/隐藏的 ul 的关联 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();
  }
 );