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を使用する代わりに、次のメソッドを使用できparentますnext。

$(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

アンカーにクラスを与え、セレクターでそれを使用するか、以下のようにセレクター内のすべてのアンカーをターゲットにします。

 $("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 に答える
0

クラスを使用して、すべてのdivに配置します

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