如何在 jquery 中获取相同 class 的文本值

Question

我的 table 中有 10 条记录。每条记录具有相同的 class 名称。如何在悬停数据文本时使用 jquery this.value 提醒 table 数据值（文本）。这是我的代码

<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email1@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email2@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email3@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email4@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email5@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email6@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email7@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email8@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email9@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email10@domain.com</a></td>

这是我的脚本。我正在为 iframe 弹出窗口使用 webui api。对于 tables 我使用了 datatables.

(function(){
    var settings = {
        trigger:'hover',
        title:'Send Mail To User',
        content:'',                 
        multi:true,                     
        closeable:false,
        style:'',
        cache:false,
        delay:300,
        padding:true,
        backdrop:false,
    };

    $('a.show-pop-iframe').on('mouseenter',function () {
        alert($(this).text());
        settings.url='emailtype.php?id='+$(this).text();
        function initPopover(){ 
            var iframeSettings = {  
                placement:'auto', //values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical 
                container: document.body, // The container in which the popover will be added (i.e. The parent scrolling area). May be a jquery object, a selector string or a HTML element. See https://jsfiddle.net/1x21rj9e/1/ 
                width:'auto', //can be set with  number 
                height:'auto', //can be set with  number 
                closeable:true,
                padding:false,
                type:'iframe', 
                url:settings.url
            };      

            $('a.show-pop-iframe').webuiPopover('destroy').webuiPopover($.extend({},settings,iframeSettings));
        }

        initPopover();  
    }); 
})();

Answer 1

如果你有 class 'hover-cust' 那么

$('.hover-cust').on("mouseenter", function() {
  alert($(this).text());
});

如果你想在 td 上发出警报，那么

$('td').on("mouseenter", function() {
  var link = $(this).find(".hover-cust");
  if(link && link.length > 0) {
    alert($(link).text());
  }
});

Answer 2

$(".hover-cust").hover(function(){
    alert($(this).text());
});

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><a href="#" class="hover-cust">email1@domain.com</a></td>
        <td><a href="#" class="hover-cust">email2@domain.com</a></td>
        <td><a href="#" class="hover-cust">email3@domain.com</a></td>
        <td><a href="#" class="hover-cust">email4@domain.com</a></td>
        <td><a href="#" class="hover-cust">email5@domain.com</a></td>
        <td><a href="#" class="hover-cust">email6@domain.com</a></td>
        <td><a href="#" class="hover-cust">email7@domain.com</a></td>
        <td><a href="#" class="hover-cust">email8@domain.com</a></td>
        <td><a href="#" class="hover-cust">email9@domain.com</a></td>
        <td><a href="#" class="hover-cust">email10@domain.com</a></td>
    </tr>
</table>

Answer 3

在一组相似的节点上添加许多事件侦听器被认为是一种不好的做法。

const table = document.querySelector('#your_table_id');
table.addEventListener('mouseover', function(event) {
    const target = event.target;
    const tag = target.tagName;
    const parentTag = target.parentNode.tagName;
    if(tag !== 'a' || parentTag !== 'td') {
        return; // not my target, leave the function
    }

    alert(target.textContent);
});

如何在 jquery 中获取相同 class 的文本值

How to get text value of same class in jquery

html

javascript

jquery

alert