jQuery add html content in hidden div

Question

Когда я использую селектора jQuery для добавления динамически генерируемого html в скрытый div, они не работают. Как добавить что-то в скрытый div с jquery? Мне нужно сделать div скрытым при добавлении контента после ajax-запроса, потому что я должен генерировать много html-блоков и добавлять их на страницу, я хочу добавить все блоки в скрытый div, а затем показать весь контент (сделать div visible).

Answer 1

Вы можете использовать шкурку JQuery() и шоу() функция для этого, что немного чище, чем используется .css() ZeJur. Посмотрите на мою Plunker example

Пример:

<div class="hiddenContent">I am hidden div</div>  
<button class="addDynamicContent">Add dynamic content to div - hide while doing</button> 

Сценарий:

<script> 
$('.addDynamicContent').click(function() { 
     $.ajax({ 
      url: "http://api.icndb.com/jokes/random", 
      beforeSend: function() { 
      $('.hiddenContent').hide(); 
      console.log('I hide before request'); 
      }, 
      success: function(response) { 
      $('.hiddenContent').html(response.value.joke); 
      $('.hiddenContent').show(); 
      console.log('I show after I got the content'); 
      } 
     }); 
     }); 
</script> 

Заканчивать Plunker

Answer 2

Чтобы скрыть элемент использовать jQuery.css() метод

$('#panel').css('visibility', 'hidden');

и показать его обратно:

$('#panel').css('visibility', 'visible');

Если Вам необходимо скрыть свой элемент перед загрузкой новых элементов Вы можете использование beforeSend функция:

beforeSend: function(){ 
    $('#panel').css('visibility', 'hidden'); 
} 

и после загрузки всех Ваших данных и разобраны Используй success функцию, чтобы показать его снова:

success: function(data){ 
    $('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible'); 
} 

и все вместе:

$.ajax({ 
     method: "POST", 
     url: "sample.php", 
     dataType: "json", 
     beforeSend: function(){ 
      $('#panel').css('visibility', 'hidden'); 
     }, 
     success: function(data){ 
      $('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible'); 
     }, 
    });