Question

我正在编写看起来像这样的HTML：

def update
  respond_to do |format|
    format.html do
      if @currency.update(currency_params)
        prediction = @currency.neural_network.predict
        redirect_to prediction
      end
    end

    format.json { ... } # or whatever format you want to define.
  end
end

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

<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>

$.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();
    }
});

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

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

Answer 1

您需要#来表明您的jQuery选择器正在定位HTML元素的id属性。

使用以下内容：

$('#my_grad').show()

此外，您需要将visibility:hidden;属性更改为display:none;

jsFiddle

作为参考，要使用jQuery选择器定位任何id属性，您需要在属性值之前添加#符号前缀。对于class选择器，请使用.前缀。如果没有，您可以定位指定名称的标记;在这种情况下，您要尝试定位代码<my_grad>。

例如：

$('#my_grad').show()＆lt; ==＆gt; <div id="my_grad">

$('.my_grad').show()＆lt; ==＆gt; <div class="my_grad">

$('my_grad').show()＆lt; ==＆gt; <my_grad>

Answer 2

使用＆＃34; style = display：none＆＃34;而不是＆＃34; style = visibility：hidden＆＃34;

你错过了＃字符来引用你的身份

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

2 个答案: