Когда последний класс скрыт, появится сообщение

Question

У меня есть сообщение вместе с другими классами, .tab внутри родительского div.

Цель : Когда я нажимаю .tab, оно скрывается и после последнего нажата вкладка, появится сообщение.

Проблема : при нажатии первой вкладки сразу появляется сообщение.

Пожалуйста, посмотрите на мой образец в jsfiddle

код:

$('.tab').click(function() {
  $(this).hide();
  if (!$('#banner-message').hasClass('tab')) {
    $('.message').show();
  }
})

#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
      This is a banner message
      </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

Answer 1

Вам просто нужно лучшее логическое условие. Если количество видимых вкладок равно 0, отобразите сообщение.

$(function() {
  $('.tab').click(function() {
    $(this).hide();
    if ($(".tab:visible").length == 0) {
      $("#banner-message .message").show();
    }
  });
});

#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
      This is a banner message
      </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

Answer 2

Ваш текущий if logi c неверен, так как вы проверяете:

!$('#banner-message').hasClass('tab')

, что означает: если элемент с идентификатором banner-message не имеет класса tab, то сделать что-то ...

Одно из решений - проверить, равно ли количество видимых .tab элементов 0.

Это можно сделать с помощью селектора jQuery: $(".tab:visible"), это получит все элементы с классом tab, которые видимы, поэтому, если это равно 0, покажите сообщение.

См. ниже:

$('.tab').click(function() {
  $(this).hide();
  if ($('.tab:visible').length == 0) {
    $('.message').show();
  }
})

#banner-message {
  border: 1px solid #000;
  height: 42px;
  width: 70%;
  display: flex;
}

.tab {
  height: 15px;
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid red;
  margin-right: 10px
}

.message {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <span class="message">
   This is a banner message
  </span>
  <span class="tab">Close Tab1</span>
  <span class="tab">Close Tab2</span>
  <span class="tab">Close Tab3</span>
</div>

Answer 3

Попробуйте использовать приведенный ниже фрагмент кода.

JS

$('.tab').click(function() {
    $(this).hide();
  if($(".tab").is(":visible") == false) { 
    $('.message').show();
  }
})

Я изменил условие, поэтому оно будет отображать сообщение, когда все вкладки будут скрыты.