jQuery .hide () не скрывает элемент - PullRequest
Новая
       10

jQuery .hide () не скрывает элемент

1 голос
/ 02 января 2012

Когда я закончил синтаксический анализ json в указанных тегах span, я хотел автоматически скрыть имперские теги currenttimperial и forecastimperial, но когда я попытался это сделать, используйте 

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

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

и просмотрите результат в chrome и посмотрите вконсоль я вижу, что вместо 

style="display: none; "

у них на самом деле есть 

style="display: inline; "

Вот мой весь javascript и html на jsBin http://jsbin.com/efaguv/edit#javascript,html

Спасибо за любую помощьЯ получаю.

Ответы [ 3 ]

4 голосов
/ 02 января 2012

Мне кажется, проблема в том, что вы не учли тот факт, что ваш вызов 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 success делает элементы видимыми (используя .fadeIn()), конечный результат заключается в том, что они видимы.

Можете ли вы вместо этого скрыть элементы в этом обратном вызове ajax success?

1 голос
/ 05 января 2016

У меня была похожая проблема, когда hide не скрывался. Я использую angular и обнаружил, что директива использовала функцию !important css для атрибута стиля display, заставляя его оставаться блоком и не позволяя скрыть изменить отображение на none.

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

1 голос
/ 02 января 2012

Вы можете использовать 

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

или 

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