Показывать заголовок, когда Div виден

Question

Я пытаюсь отобразить один из двух заголовков в зависимости от того, доступны ли / видны ли некоторые элементы DOM на странице. По какой-то причине это не работает ... Вот пока что live демо .

У меня есть следующий код:

$('h3.list_heading').css('display', 'none');
$('h3#error').css('display', 'none');
    if ( $('div.availableNowListing').filter(':visible').length == 0) {
        $('h3#error').css('display', 'block');
    } else {
        $('h3.list_heading').css('display', 'block');
    }

На данный момент, независимо от того, что я выбираю, отображается только один заголовок ...

EDIT Просто чтобы объяснить, что должно произойти: При щелчке по магазину для сортировки в нем должны отображаться только записи, связанные с этим магазином. Если с этим магазином нет фруктов, то заголовок:

Наше предложение о лучшем из доступных в xxxxx на этой неделе

должно измениться на

Удачи! Кажется, мы не смогли найти хороших фруктов в магазине ххххх на этой неделе

РЕДАКТИРОВАТЬ 2 Попытка с использованием следующего кода, но неважно, в каком хранилище я выбираю сортировку, я просто получаю сообщение об ошибке, даже если присутствуют div, которые я ищу ...

$('h3.list_heading').hide();
$('h3#error').hide();
if ( $('div.availableNowListing:visible').length) {
    $('h3#error').show();
} else {
    $('h3.list_heading').show();
}

Answer 1

Попробуйте изменить эти строки в вашем switch

$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast');
check_heading();

к этому вместо этого, смещение вызова функции в качестве обратного вызова для fadeOut().

$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast',  check_heading);

Answer 2

function onscreen_sort (get_store) {
  var check = false;
  $('div.availableNowListing').each( function() {
      // Reset Display
      var correct = $(this).children('.' + get_store).not(':first-child')
      var incorrect = $(this).children(':not(.' + get_store + ') ').not(':first-child')

      if(correct.length > 0) record = true;

      correct.find(":hidden").fadeIn('fast');  //only hide which is not correct ->less dom overlow
      incorrect.find(":visible").fadeOut('fast'); //any only show which is correct but hidden
  });
  check_heading(check)
}

function check_heading(boo) {
  $('h3#error').hide();
  $('h3.list_heading').hide();    

  if (boo) {
      $('h3.list_heading').show();
  } else {
      $('h3#error').show();
  }
}

switch ( store_selected ) {
  case "all" : 
      var class_match = "in_all"
      onscreen_sort(class_match);
      $('span.store_change').text( ' All Stores' );
      $('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast');
      //check_heading();  //no more needed!
      break;

  case "asda" : 
     ...
     ...
     ...

Я надеюсь, что это работает.Боже, удачи!

Answer 3

Не уверен, что это поможет, но попробуйте изменить код на:

$('h3.list_heading').hide();
$('h3#error').hide();

if ($('div.availableNowListing:visible').length) {
    $('h3#error').show();
} else {
    $('h3.list_heading').show();
}