同じidタグを持つ別のテキストを表示するjquery

私のコードで行うべきことは、特定のidを持つi要素をホバリングすると、iタグ内のテキストを取り込んでアラートに戻すことです。しかし、これは最初のIDのためにのみ機能するので、id = tooltを持つ私の2番目のIDは、その上にマウスを置くと警告を受けません。とにかくこれを解決できるのでしょうか？ T同じidタグを持つ別のテキストを表示するjquery

ありがとう！

<?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>

出典

2016-05-11 Aplex

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'); 

       }); 
      });

出典

2016-05-11 16:11:46 Covik

は非常に、非常に迅速な答えをどうもありがとうございます！ – Aplex

同じidタグを持つ別のテキストを表示するjquery

答えて

関連する問題