Jquery:在悬停时尝试在td中查找元素时出现未定义错误

Question

我已经将悬停事件附加到我的表td中，并试图读取一些span id和值，但得到了未定义的错误。my td看起来像。

<td class="text-right  note FYA-col  right-cell-border  right-cell-border no-bottom-border">
<span style="display:none" id="load_64_41" class="hover-note">Loading...</span>
<a data-id="EPS, GAAP" href="javascript:void(0)" class="my-lineitem  stat-toggle">$10.57</a>
<span data-header="2019 FYA" id="com_64_41" class="comment_sign"></span>
</td

我试图找到这条路，但得到了未定义的错误。我错在哪里？

这是我的js代码

$('#dataMatrixAll td').hover(
// This first function is our mouse over function
function()
{
//alert('IN');
period = $(this).closest().attr('data-header');
elementid = $(this).closest().attr('id');
alert(elementid);
res = elementid.split("_");
rowid = res[1];
loaderid = 'load_' + res[1] + '_' + res[2];
alert('line item ' + $("#lineitem_" + rowid).text() + ' header text ' + period + ' loader text ' + $('#' + loaderid).text());
//alert($('#' + loaderid).text());
$('#' + loaderid).show();
},
// This first function is our mouse out function
function()
{
//alert('OUT');
$('#' + loaderid).hide();
}
);

1. 我需要从类为hover的span中获取id值

正在加载。。。

2. 需要在悬停td上获取数据头值

请帮我提供一些示例代码。

我也尝试过这种方法，但仍然出现未定义的错误。

$('#dataMatrixAll td').hover(
// This first function is our mouse over function
function()
{
//alert('IN');
period = $(this).closest().find('span.comment_sign').attr('data-header');
elementid = $(this).closest().find('span.hover_note').attr('id');
alert(elementid);
res = elementid.split("_");
rowid = res[1];
loaderid = 'load_' + res[1] + '_' + res[2];
alert('line item ' + $("#lineitem_" + rowid).text() + ' header text ' + period + ' loader text ' + $('#' + loaderid).text());
//alert($('#' + loaderid).text());
$('#' + loaderid).show();
},
// This first function is our mouse out function
function()
{
//alert('OUT');
$('#' + loaderid).hide();
}
);

感谢

编辑

尝试过这种方式，但没有运气

$('#dataMatrixAll td').hover(
// This first function is our mouse over function
function()
{
//alert('IN');
//var period = $(this).closest('span.comment_sign').attr('data-header');
//var period = $(this).closest('.comment_sign').attr('data-header');
var period = $(this).parent().closest(".comment_sign").attr("id");
alert(period);
},
// This first function is our mouse out function
function()
{
//alert('OUT');
$('#' + loaderid).hide();
}
);

只需要从鼠标悬停的TD中获取元素。这里js小提琴链接https://jsfiddle.net/35aszhw6/

请帮我在哪里犯了错。感谢

Answer 1

在当前代码中，您必须使用选择器作为td，因此当您编写.next('span')时，td之后没有span标记，这就是它导致未定义的原因。相反，您可以使用a作为选择器，然后简单地使用$(this).next('span').attr('data-header');来获取属性值。

演示代码 :

$('#dataMatrixAll td a').hover(function() {
//getting next sbling
var period = $(this).next('span').attr('data-header');
console.log("first way"+period);
//or  getting span from closest td
var period1 = $(this).closest("td").find('span.comment_sign').attr('data-header');
console.log("second way"+period1)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dataMatrixAll" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Eve</td>
<td>
<span style="display:none" id="load_64_41" class="hover-note">Loading...</span>
<a data-id="EPS, GAAP" href="javascript:void(0)" class="my-lineitem  stat-toggle">$10.57</a>
<span data-header="2019 FYA" id="com_64_41" class="comment_sign"></span>
</td>
</tr>
</table>

Answer 2

我是这样做的。

var period = '';
var elementid = '';
var res = '';
var rowid = '';
var loaderid = '';
var loadingtext = '';
var lineitem = '';
var section = '';
$('#dataMatrixQuarter td').hover(
// This first function is our mouse over function
function () {
//alert($(this).index());
$('.hover-note').hide();
elementid = $(this).closest('td').find('span.hover-note').attr('id');
//alert(elementid);
if (elementid != undefined) {
loadingtext = $(this).closest('td').find('span.hover-note').text();
if (loadingtext.indexOf('Loading') != -1) {
//$(this).closest('td').find('a.my-lineitem').attr('data-id')
res = elementid.split("_");
rowid = res[1];
loaderid = 'load_' + res[1] + '_' + res[2];

section = $('select[id=Section-btn]').val();
lineitem = $("#lineitem_" + rowid).text();
//period = $(this).closest('td').find('span.comment_sign').attr('data-header');
var th = $('#dataMatrixQuarter th').eq($(this).index());
var headerText = th.text();
$('#' + loaderid).show();
//alert('section ' + section + ' line item ' + lineitem + ' period ' + headerText);
$.ajax({
url: "/Tuning/GetCommentForPeriod",
dataType: 'json',
data: {
Section: section,
LineItem: lineitem,
Period: headerText
},
type: "POST",
cache: false,
success: function (data) {
//want to return data as not boolean but string here
//alert('comment '+data);
if (data != '') {
$('#' + loaderid).text(data);
$('#' + loaderid).show();
}
},
error: function (a, b, c) {
alert("Error")
}
});
}
else {
$('#' + loaderid).hide();
$('#' + loaderid).text('Loading...')
}
}
},
// This first function is our mouse out function
function () {
$('#' + loaderid).hide();
$('#' + loaderid).text('Loading...')
}
);