1

我有一个脚本放在我的 html 文档中。

当我加载 html 页面时，脚本不起作用，但是当我将脚本放在控制台中时，脚本正在工作，并在 html 文档上产生我想要的效果。

这是脚本，我做错了什么？

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

});

4

3 回答 3

2

您很可能在它引用的元素存在之前运行该脚本。

确保<script>标签在页面中的出现晚于具有类的元素，table或者将整个脚本包装在：

$(function(){

 ... Your entire script

});

为了确保它在 DOM 准备好之前不会执行。

于 2013-05-27T23:24:01.630 回答
2

尝试用这个包装整个事情：

$(document).ready(function () { /* existing code */ });

浏览器可能在页面加载之前执行您的代码，因此在元素存在之前。

于 2013-05-27T23:27:02.250 回答
0

在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。包含在 $( window ).load(function() { ... }) 中的代码将在整个页面（图像或 iframe）（而不仅仅是 DOM）准备好后运行。

尝试将您的代码包装在此

$(document).ready(function() {
    // Your code here
});

来源

于 2013-05-27T23:29:08.023 回答