为什么我的javascript不起作用。我收到未捕获的TypeError:无法读取属性“top”错误
为什么我的javascript不起作用。我收到未捕获的TypeError:无法读取属性“top”错误。我正在尝试改进HtmlDiff库以显示额外的Html函数。Javascript无法在我的输出中使用“上一步”和“下一步”按钮 代码：为什么我的javascript不起作用。我收到未捕获的TypeError:无法读取属性“top”错误,javascript,jquery,html,css,Javascript,Jquery,Html,Css,为什么我的javascript不起作用。我收到未捕获的TypeError:无法读取属性“top”错误。我正在尝试改进HtmlDiff库以显示额外的Html函数。Javascript无法在我的输出中使用“上一步”和“下一步”按钮 代码： 我的原始数据在表中的行数更多 只要看一眼，我就认为您的“.diff_chg:nth child”+count+选择器与任何元素都不匹配。具有diff_chg类的元素是一个td，它除了textNode之外似乎没有任何子元素。我已将其更改为.diff_add。你能告诉
我的原始数据在表中的行数更多 只要看一眼，我就认为您的“.diff_chg:nth child”+count+选择器与任何元素都不匹配。具有diff_chg类的元素是一个td，它除了textNode之外似乎没有任何子元素。我已将其更改为.diff_add。你能告诉我我需要做些什么改变吗？对于diff_add来说也是一样。它也没有孩子。你到底想选什么？请注意，当您有一个选择器（如selector 1 selector 2）时，选择器部分之间的空格表示父子关系。它的意思是查找与selector2匹配的元素，这些元素是selector1的子元素。如果希望它是一个和有条件的，就不要把空格放在那里。max_length给出的是代码中存在的diff_add的数量之和。如何更改“.diff\u add:n子项”+计数+选择器？因此，每次选择特定计数的diff_add时。听起来您可能正在寻找$。diff_add:eq'+count+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.diff {font-family:Courier; border:medium;}
.diff_header {background-color:#e0e0e0}
td.diff_header {text-align:right}
.diff_next {background-color:#E6E6FA}
.diff_add {background-color:#aaffaa}
.diff_chg {background-color:#ffff77}
.diff_sub {background-color:#ffaaaa}
.navigation {position:fixed;top: 0;right: 0;background: #FFFFFF;padding:5px;border: 1px solid;}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
function scrollToElement(selector, time, verticalOffset) {
time = typeof (time) != 'undefined' ? time : 500;
verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
$(document).ready(function () {
count = 0;
var max_length = $(' .diff_add ').length;
$('#next').click(function (e) {
if (count < max_length) {
count++;
} else {
count = 1;
// alert("reached start point");
}
e.preventDefault();
scrollToElement(' .diff_add :nth-child(' + count + ')', 1000, -150);
});
$('#prev').click(function (e) {
if (count > 1) {
count--;
} else {
count = max_length;
// alert("reached start point");
}
e.preventDefault();
scrollToElement(' .diff_add :nth-child(' + count + ')', 1000, -150);
})
});</script>
</head>
<body>
<div class="navigation"> <a href="#" id="prev">Previous</a>
<br> <a href="#" id="next">Next</a>
</div>
<table class="diff" id="difflib_chg_to0__top"
cellspacing="0" cellpadding="0" rules="groups" >
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<tbody>
<tr><td class="diff_next"><a href="#difflib_chg_to0__216">n</a></td><td class="diff_header" id="from0_5589">5589</td><td nowrap="nowrap"><span class="diff_sub">60 </span></td><td class="diff_next"><a href="#difflib_chg_to0__216">n</a></td><td class="diff_header" id="to0_2547">2547</td><td nowrap="nowrap"><span class="diff_add"> | 29| </span></td></tr>
<tr><td class="diff_next"></td><td class="diff_header" id="from0_5590">5590</td><td nowrap="nowrap"><span class="diff_sub">--- </span></td><td class="diff_next"></td><td class="diff_header" id="to0_2548">2548</td><td nowrap="nowrap"><span class="diff_add">---|---|--- </span></td></tr>
<tr><td class="diff_next"><a href="#difflib_chg_to0__216">n</a></td><td class="diff_header" id="from0_5589">5589</td><td nowrap="nowrap"><span class="diff_sub">60 </span></td><td class="diff_next"><a href="#difflib_chg_to0__216">n</a></td><td class="diff_header" id="to0_2547">2547</td><td nowrap="nowrap"><span class="diff_add"> | 29| </span></td></tr>
</tbody>
</table>
<table class="diff" summary="Legends">
<tr> <th colspan="2"> Legends </th> </tr>
<tr> <td> <table border="" summary="Colors">
<tr><th> Colors </th> </tr>
<tr><td class="diff_add"> Added </td></tr>
<tr><td class="diff_chg">Changed</td> </tr>
<tr><td class="diff_sub">Deleted</td> </tr>
</table></td>
<td> <table border="" summary="Links">
<tr><th colspan="2"> Links </th> </tr>
<tr><td>(f)irst change</td> </tr>
<tr><td>(n)ext change</td> </tr>
<tr><td>(t)op</td> </tr>
</table></td> </tr>
</table>
</body>
</html>