1

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

我为每个 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>
4

4 回答 4

1

除了使用 ID，您还可以使用parentandnext方法：

$(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()
    });
});
于 2012-12-03T09:30:49.673 回答
0

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

$(document).ready(function(){
  $(".toolTip").hover(function(){
    $(this).toggle();
    });
});
于 2012-12-03T09:31:56.397 回答
0

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

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

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

 });
于 2012-12-03T09:29:55.757 回答
0
  1. 选择所有 以 结尾的a 标签。id_down
  2. 将函数应用于从idtip获取的 + 索引。a
$("a[id$='_down']").hover(function(){
    $("#tip" + $(this).prop('id')[1] + "_down").toggle(); // modify it if more than 10 indexes exist
});
于 2012-12-03T09:30:08.137 回答