Question

我需要一些方法来查找相同的代码如何在jsFiddle上运行但在localhost开发环境中不可行。这让我抓狂，因为我不知道在哪里找到或测试什么，以便在localhost端获得错误。

双方都在做什么？

通过选中顶部的第一个复选框
标记每个复选框

什么在jsFiddle中工作但在localhost中不起作用？

如果您首先使用第一个复选框切换所有复选框，然后取消选中任何复选框，您将看到第一个复选框是如何取消选中的，这是正确的，它仅适用于jsFiddle但不适用于localhost

那么，为了解决问题，你将在localhost上做什么测试？我的意思是不知道一些console.log()或警告或其他什么来获得线索因为我不知道还能做什么。代码完全一样。另外我在控制台上没有任何错误。有什么建议吗？

编辑：包含代码

这是我正在按照一些用户的要求谈论的代码：

$(function () {
    function marcarTodosCheck(selChk, tableBody) {
        $(selChk).on('click', function () {
            var $toggle = $(this).is(':checked');
            $(tableBody).find("input:checkbox").prop("checked", $toggle);
        });

        $(tableBody).find("input:checkbox").on('click', function () {
            if (!$(this).is(':checked')) {
                $(selChk).prop("checked", false);
            } else if ($(tableBody).find("input:checkbox").length == $(tableBody).find("input:checkbox:checked").length) {
                $(selChk).prop("checked", true);
            }
        });
    }

    marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');

});

测试

好的，试图找到原因，因为代码在localhost上失败了，我这样做了：

function marcarTodosCheck(selChk, tableBody) {
    $(selChk).on('click', function () {
        var $toggle = $(this).is(':checked');
        $(tableBody).find("input:checkbox").prop("checked", $toggle);
    });

    $(tableBody).find("input:checkbox").on('click', function () {
        if (!$(this).is(':checked')) {
            console.log('no estoy marcado' + !$(this).is(':checked'));
            $(selChk).prop("checked", false);
        } else if ($(tableBody).find("input:checkbox").length == $(tableBody).find("input:checkbox:checked").length) {
            console.log('si estoy marcado' + $(this).is(':checked'));
            $(selChk).prop("checked", true);
        }
    });
}

marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');

但是没有console.log()被执行，这让我觉得，为什么？

澄清一些观点

好吧，也许我先忘了告诉这个，在jsFiddle示例中默认加载数据我的意思是它存在于模态中，现在在我的代码中，数据通过这个jQuery代码加载，这使得Ajax调用并添加tr动态地，并且可能存在代码无法在localhost上运行的问题：

$('button#btnBuscar').on('click', function (ev) {
    ev.preventDefault();
    $.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
            .done(function (data, textStatus, jqXHR) {
                if (data.entities.length > 0) {
                    $('#resultadoNorma').show();

                    var $html = '';
                    data.entities.forEach(function (value, index, array) {
                        $html += '<tr>';
                        $html += '<td><input type="checkbox" value="' + value.id + '"></td>';
                        $html += '<td>' + value.codigo + '</td>';
                        $html += '<td>' + value.norma + '</td>';
                        $html += '<td>' + value.anno + '</td>';
                        $html += '<td>' + value.comiteTecnico + '</td>';
                        $html += '</tr>';
                    });

                    $("table tbody#resultadoNormaBody").html($html);
                }
            })
            .fail();
});

另外正如您注意到默认情况下#resultadoNorma是隐藏的，只有在我从Ajax调用中获得结果时才显示它。这是原始的HTML：

<table  class="table table-hover table-condensed" id="resultadoNorma" style="display: none">
    <thead>
        <tr>
            <th><input type="checkbox" id="toggleCheckboxNorma" name="toggleCheckboxNorma" /></th>
            <th>Nro.</th>
            <th>Norma COVENIN</th>
            <th>Año de Publicación</th>
            <th>Comité Técnico</th>
        </tr>
    </thead>
    <tbody id="resultadoNormaBody">

    </tbody>
</table>

Answer 1

对于它的价值，它适用于localhost。我使用标准$(document).ready函数而不是onLoad或whatnot。

$( document ).ready( function() {
    marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');
});
function marcarTodosCheck(selChk, tableBody) {
    $(selChk).on('click', function () {
        var $toggle = $(this).is(':checked');
        $(tableBody).find("input:checkbox").prop("checked", $toggle);
    });

    $(tableBody).find("input:checkbox").on('click', function () {
        if (!$(this).is(':checked')) {
            $(selChk).prop("checked", false);
        } else if ($(tableBody).find("input:checkbox").length == $(tableBody).find("input:checkbox:checked").length) {
            $(selChk).prop("checked", true);
        }
    });
}

<强>更新由于您是在动态地向表中添加内容，因此您可能必须在每次AJAX请求后再次调用该函数...尝试在那里添加函数调用...

$('button#btnBuscar').on('click', function (ev) {
    ev.preventDefault();
    $.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
            .done(function (data, textStatus, jqXHR) {
                if (data.entities.length > 0) {
                    $('#resultadoNorma').show();

                    var $html = '';
                    data.entities.forEach(function (value, index, array) {
                        $html += '<tr>';
                        $html += '<td><input type="checkbox" value="' + value.id + '"></td>';
                        $html += '<td>' + value.codigo + '</td>';
                        $html += '<td>' + value.norma + '</td>';
                        $html += '<td>' + value.anno + '</td>';
                        $html += '<td>' + value.comiteTecnico + '</td>';
                        $html += '</tr>';
                    });

                    $("table tbody#resultadoNormaBody").html($html);
                    marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');
            })
            .fail();
});

代码在jsFiddle上工作，但不在开发服务器上的localhost上工作

1 个答案: