时间戳

首页 > 解决方案 > 隐藏/显示功能不适用于 Javascript

javascript - 隐藏/显示功能不适用于 Javascript

问题描述

这是我的加载功能

        $("html").load(function(){
            $.post("DumpsterService.php", function(result){     //da mettere url
                $("h2").append(data).each;
                });
            });

            $("#QuantitaDep").hide();
            $("#NumDepositi").hide(); 
        });

但是当我加载页面时，一切都显示出来了，我也尝试过 ("canvas#QuantitaDep") 和 ("canvas#NymDepositi") 但仍然无法正常工作

这里的画布：

    <div class="numeroDepositi">
        <h2>Numero depositi:</h2>
        <canvas id="NumDepositi" width="300" height="100"></canvas>
        <script>
            var ctx = document.getElementById('NumDepositi').getContext('2d');
            var chart = new Chart(ctx, {
            type: 'line',

            data: {
                labels: ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
                datasets: [{
                    label: 'Andamento',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45] //for example
                }]
            },

            // Configuration options go here
            options: {}
        });
        </script>

我只分享了一张画布，因为它们是一样的，但是

<canvas id="QuantitaDep" width="300" height="100"></canvas>

请帮助我，我不明白

标签： javascripthtmljqueryjsoncharts

解决方案

您可以尝试：

$(document).ready(function() {

代替：

$("html").load(function(){

还尝试在标签之前加载您的 JS 片段</html>，如果仍然无法正常工作，请尝试将其移动到您的 </head>标签之前。

如果您的 jQuery 加载正确，您应该首先进行调试，您可以尝试在标签之间添加此代码<head></head>，使用：

<script>
    $( document ).ready(function() { console.log( "document loaded" ); });

    $( window ).on( "load", function() { console.log( "window loaded" ); });
</script>

并打开浏览器控制台（Chrome 中的 F12）并检查控制台日志，您应该看到document loaded或者window loaded您的 JS 依赖项是否正常。

jQuery 文档：https ://learn.jquery.com/using-jquery-core/document-ready/

默认情况下，您可以尝试<canvas>仅使用 CSS 加载不可见的元素：

<canvas id="NumDepositi" name="NumDepositi" width="300" height="100" style="display:none;visibility:hidden;"></canvas>

并使用JS更改为可见的onClick：

$('#NumDepositi').click(function() {
        $("#NumDepositi").show();
        $("#NumDepositi").css('visibility','visible');
        $("#NumDepositi").css('display','block');
    /* you can use 'this' instead, like:
        $(this).show();
        $(this).css('visibility','visible');
        $(this).css('display','block');
    */
});

推荐阅读