我有一个脚本放在我的html doc中。
当我加载html页面时,脚本无法正常工作,但是当我将脚本放在控制台中时,脚本正在使用html doc制作我想要的效果。
这是脚本,我做错了什么?
var maxRows = 10;
$('.table').each(function() {
var cTable = $(this);
var cRows = cTable.find('tr:gt(0)');
var cRowCount = cRows.size();
if (cRowCount < maxRows) {
return;
}
cRows.each(function(i) {
$(this).find('td:first').text(function(j, val) {
return (i + 1) + " - " + val;
});
});
cRows.filter(':gt(' + (maxRows - 1) + ')').hide();
var cPrev = cTable.siblings('.prev');
var cNext = cTable.siblings('.next');
cPrev.addClass('disabled');
cPrev.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cPrev.hasClass('disabled')) {
return false;
}
cRows.hide();
if (cFirstVisible - maxRows - 1 > 0) {
cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
} else {
cRows.filter(':lt(' + cFirstVisible + ')').show();
}
if (cFirstVisible - maxRows <= 0) {
cPrev.addClass('disabled');
}
cNext.removeClass('disabled');
return false;
});
cNext.click(function() {
var cFirstVisible = cRows.index(cRows.filter(':visible'));
if (cNext.hasClass('disabled')) {
return false;
}
cRows.hide();
cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();
if (cFirstVisible + 2 * maxRows >= cRows.size()) {
cNext.addClass('disabled');
}
cPrev.removeClass('disabled');
return false;
});
});
答案 0 :(得分:2)
您最有可能在它引用的元素存在之前运行该脚本。
确保<script>
标记在页面的后面出现,而不是包含类table
的元素,或者将整个脚本包装在:
$(function(){
... Your entire script
});
以确保在DOM准备好之前它不会执行。
答案 1 :(得分:2)
尝试用这个包装整个事情:
$(document).ready(function () { /* existing code */ });
浏览器可能在页面加载之前执行您的代码,因此在元素存在之前。
答案 2 :(得分:0)
在文档“准备就绪”之前,无法安全地操作页面。 jQuery为您检测这种准备状态。代码包含在里面 $(document).ready()只会运行一次页面Document Object Model(DOM)已准备好执行JavaScript代码。代码包括在内 在$(window).load(function(){...})里面会运行整个 页面(图片或iframe),而不仅仅是DOM,已准备就绪。
尝试将代码包装在此
中$(document).ready(function() {
// Your code here
});