显示具有相同id标记jquery的不同文本

时间:2016-05-11 16:06:18

标签: jquery html

所以我想让我的代码做的是当我将i元素悬停在具有某个id的i元素时,我希望我的jquery获取i标签内的文本并将其发回警报。但是这只适用于第一个id,所以我的第二个id = toolt并没有在我将鼠标悬停在它上面时收到警报。无论如何我可以解决这个问题吗? Ť

谢谢!

<?php
?>
<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <meta charset="utf-8">
    <title>Tooltip</title>
        <script>
            $(document).ready(function(){
                $('#toolt').hover(function(){
                    //MOUSE ENTERS
                    $('#tooltip').css('display', 'block');
                    var x = $('#toolt').text();
                    alert(x);

                },function(){
                    //MOUSE LEAVES
                    $('#tooltip').css('display', 'none');

                });
            });


        </script>


    <style>
        #ppp{
            position:fixed;
            left:200px;
        }

        #tooltip{
                position:absolute;
                z-index:2;
                width:200px;
                padding5px;
                background-color:#A7A7A7;
                font-size:17px;
                border: 2px solid black;
                display:none;
        }

    </style>

</head>
<body>
    <div id="tooltip">
        Hello fanbois
    </div>

    <p id="ppp">This is a text that has <i id="toolt">Things</i> inside it <i id="toolt">Stuff</i>  </p>



</body>
</html>

1 个答案:

答案 0 :(得分:0)

你需要课而不是ids。 ID是唯一标识符,只能使用一次。

将属性id更改为class

<p id="ppp">This is a text that has <i class="toolt">Things</i> inside it <i class="toolt">Stuff</i>  </p>

和jQuery:

$(document).ready(function(){
                $('.toolt').hover(function(){
                    //MOUSE ENTERS
                    $('#tooltip').css('display', 'block');
                    var x = $(this).text();
                    alert(x);
//Here you can use $('#tooltip').text(x); to make text display in the tooltip

                },function(){
                    //MOUSE LEAVES
                    $('#tooltip').css('display', 'none');

                });
            });