jQuery .hide() 不隐藏元素

Question

当完成将 json 解析为指定的 span 标签时，我想自动隐藏英制标签 currentimperial 和 Forecastimperial 但是当我尝试执行此操作

$('#currentimperial').hide();

$('#forecastimperial').hide();

并在 chrome 中查看结果并在控制台中查看时，我看到

style="display: none; "

它们实际上没有

style="display: inline; "

这里是我在 jsBin http://jsbin.com/efaguv/edit#javascript,html

感谢您收到的任何帮助。

Answer 1

我认为问题是你没有考虑到你的 ajax 调用是异步的这一事实。

正在发生的事情的一个非常简单的示例：

1 jQuery(document).ready(function($) {
2   $('#warning').remove('#warning');   
3   $.ajax({
4        url: 'http://api.wunderground.com/api/APIKEYREMOVED/geolookup/conditions/forecast/q/51.773079,-1.591353.json',
5        dataType: "jsonp",
6        success: function(parsed_json) {
7           $('#currentimperial').fadeIn(1000).append(+temp_f+ '℉ ');
8        }
9    });
10 
11   $('#celcius').hide();
12   $('#currentimperial').hide();
13   $('#forecastimperial').hide();
14 });

• 第 2 行执行
• 第 3 行执行以发出 ajax 请求（将在将来的某个时刻收到响应）
• 第 11-13 行执行以隐藏项目
• 第 14 行：您的文档就绪功能完成
• （最终) 收到 ajax 响应并调用成功处理程序，因此执行第 7 行。

因为（在完整代码中）ajax 成功回调使元素可见（使用 .fadeIn()），最终结果是它们可见。

您可以隐藏 ajax 成功回调中的元素吗？

Answer 2

您可以使用

$('#currentimperial').slideUp();

或

document.getElementById('currentimperial').style.display="none";

Answer 3

我有一个类似的问题，隐藏没有隐藏。我正在使用 Angular，发现指令在 display 样式属性上使用 !important css 功能，强制其保留为块并阻止 hide 将显示更改为无。

elem.attr('style', 'display: none !important;');