Question

我想使用大量列表的工具提示

我为每个div编写了一个jquery，但我不知道绑定多个div项的功能

这是链接 http://masterssoftware.in/tool_tip2.html 并且在提到的代码之下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#a1_down").hover(function(){
        $("#tip1_down").toggle();
        });

    $("#a2_down").hover(function(){
        $("#tip2_down").toggle();
        }); 

        $("#a3_down").hover(function(){
        $("#tip3_down").toggle();
        }); 


    });

</script>
<style>
body{ background:#690;}
.tip{ width:500px; height:100px; padding:10px; background:#CFF; display:none; overflow:hidden; border-radius:5px 5px 5px 5px; z-index:200; position:absolute;}
.tip h4{ display:block; font-size:18px; text-transform:uppercase;}
.tip p{ font-size:14px;}
</style>
</head>

<body>
<ul>
   <li><a id="a1_down" href="#">aaaaaaaaaaa</a></li>
<div id="tip1_down" class="tip"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>

<li><a id="a2_down" href="#">aaaaaaaaaaa</a></li>
<div id="tip2_down" class="tip"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>
<li><a id="a3_down" href="#">aaaaaaaaaaa</a></li>
<div id="tip3_down" class="tip"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>
</ul>
</body>
</html>

Answer 1

您可以使用parent和next方法代替使用ID：

$(document).ready(function(){
    $("ul li a").hover(function(){
        $(this).parent().next().toggle()
    });
});

或使用课程：

$(document).ready(function(){
    $("ul a.classname").hover(function(){
        $(this).parent().next('.tip').toggle()
    });
});

Answer 2

给锚定一个类并在选择器中使用它或定位选择器中的所有锚点，如下所示：

 $("ul li a").hover(function(){

    $(this).parent().find('.tip').toggle();

 });

Answer 3

选择a以id结尾的所有_down代码。
将函数应用于从tip的id中获取的a +索引。

$("a[id$='_down']").hover(function(){
    $("#tip" + $(this).prop('id')[1] + "_down").toggle(); // modify it if more than 10 indexes exist
});

Answer 4

使用一个类并将其放在每个div

上

$(document).ready(function(){
  $(".toolTip").hover(function(){
    $(this).toggle();
    });
});

如何为多个div id绑定单个功能

4 个答案: