Блог

У меня простая проблема, у меня есть список со всеми одинаковыми именами классов, При нажатии на один он анимируется из контейнера, а затем перенаправляет вас и т. Д. У него также есть кнопка скрыть, когда я скрываю их все, я хочу, чтобы браузер предупреждал меня, когда все они скрыты вручную, однако, поскольку список уже скрыт на странице, пока не будет нажата кнопка для отображения списка, я не уверен, что это мешает моему jqueryили нет.

Html в основном выглядит так —

 <ul class="alertContainer"> <!-- Hidden until button is clicked to show -->
  <li class="alert"> </li>  <!-- each are removed one at a time -->
  <li class="alert"> </li>
  <li class="alert"> </li>
  <li class="alert"> </li>
<ul>
  

jquery —

  $(document).ready(function() {
 if (!$('.alerts:visible').length === 0)
  alert('all are hidden');

 });
  

Поскольку предупреждения уже скрыты при загрузке веб-сайта, я думаю, что это вызывает проблему, но они становятся видимыми при нажатии кнопки, а затем их можно перевести в скрытое состояние по отдельности. Я не уверен, что лучше поместить этот блок кода внутри кода, который используется для удаления предупреждений

jquery для удаления предупреждений по отдельности —

  $(document).ready(function() {
$('.alerts').click(function() {
     $(this).animate({ marginLeft: "100%"} , 100);
     $(this).attr("style","overflow-x:visible");

});
});

$(document).ready(function() {
  $('.alerts').click(function() {
     $(this).fadeOut(200);
  });
  });
  

Если кто-нибудь может мне помочь, это было бы оценено.

Взгляните на приведенный ниже код и попробуйте заменить им весь описанный выше javascript.

Обратите внимание на строгое использование вложенности, обратных вызовов и цепочки.

 $(document).ready(function() {

    $('.alert').click(function(event) {
        $(this).animate({
            marginLeft: "100%"
        }, 100, function() {
            $(this).attr("style","overflow-x:visible");
        }).fadeOut(200, function() {
            if ($(".alertContainer li:visible").length == 0) {
                alert('all are hidden');
            }
        });

    });

});