javascript - 在 AJAX 调用完成之前如何隐藏页面元素？

Question

我正在编写如下所示的 HTML:

<div>
    <div id='chart_div'></div>
    <div style='visibility:hidden;' id='my_grad'>
        <svg>
            <!-- The SVG element I want to hide until the data for the chart
                 in chart_div is obtained and the chart renders -->
        </svg>
    </div>
</div>

在我的 JavaScript 中，我尝试了以下两种 AJAX 调用:

---

$.ajax({
    url: 'http://example.com/path/to/source/data',
    dataType: 'jsonp',
    success: function(data) {
        // Parse data and create chart (for chart_div).
    },
    complete: function (data) {
        $('#my_grad').show();
    }
});

---

$.ajax({
    url: 'http://example.com/path/to/source/data',
    dataType: 'jsonp',
    success: function(data) {
        // Parse data and create chart (for chart_div).
    }
}).done(function(){
    $("#my_grad").show(); 
});

---

问题在于，尽管 SVG 元素最初是隐藏的，但在两种情况下加载图表后都无法显示。

如何让页面的 CSS 部分等到 AJAX 调用完成后才出现？

Answer 1

您需要 #表明你的 jQuery 选择器的目标是 id HTML 元素的属性。

使用以下内容:

$('#my_grad').show()

此外，您需要更改 visibility:hidden;属性(property)display:none;

jsFiddle

作为引用，以任何 id 为目标带有 jQ​​uery 选择器的属性，您需要在 # 前加上前缀在属性值前签名。对于 class选择器使用 .字首。如果没有任何一个，您将定位到指定名称的标签；在这种情况下，您将尝试定位标签 <my_grad> .

例如:

$('#my_grad').show() <==> <div id="my_grad">

$('.my_grad').show() <==> <div class="my_grad">

$('my_grad').show() <==> <my_grad>