显示Div时显示标题

Show Heading when Div is visible

本文关键字：显示 标题 Div      更新时间：2023-09-26

我试图显示两个标题中的一个，这取决于页面上是否有一些DOM元素可用/可见。出于某种原因，它不起作用。。。这是迄今为止的现场演示。

我有以下代码：

$('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');
    }

目前，无论我选择什么，我只会显示一个标题。。。

编辑只是为了解释应该发生什么：单击要排序的存储时，它应该只显示与该存储关联的条目。如果没有与该商店相关的水果，则标题为：

我们对xxxxx本周最佳产品的建议

应更改为

运气不好！本周我们似乎在xxxxx商店找不到任何好水果

编辑2尝试使用以下代码，但无论我选择哪个存储进行排序，即使我要查找的div存在，我也会收到错误消息。。。

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

尝试更改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);

不确定这是否有帮助，但尝试将代码更改为：

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

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" : 
     ...
     ...
     ...

我希望这能奏效。祝你好运！

相关文章：