當Div可見時顯示標題

我試圖顯示兩個標題之一，具體取決於某些DOM元素在頁面上是否可用。出於某種原因，它不能正常工作......到目前爲止，這裏是live demo。當Div可見時顯示標題

我有下面的代碼：

$('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存儲中的任何好果子本週

EDIT 2 使用下面的代碼試過，但nomatter其存儲我選擇排序，我只是得到錯誤信息，即使div的我正在尋找存在...

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

來源

2011-06-01 Tiny Giant Studios

我看到了頁面，你有什麼要說的嗎？ – 2011-06-01 15:41:46

剛剛添加了一些說明:) – 2011-06-01 15:47:56

哦，你的意思是說，如果用戶將組合框的選擇更改爲一個值，並且如果選定的下面沒有子值，那麼封裝組合框的標題應該改變？ – 2011-06-01 15:51:37

嘗試在你的改變這些線

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

此相反，移函數調用作爲回調。

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

來源

2011-06-01 16:13:08 Marcel

這看起來像一個很好的建議 - 運行時'：visible'選擇器選擇的元素過多。 – Town 2011-06-01 16:23:02

男人，我們在哪裏6個小時前？ :) - 謝謝，它似乎完美的工作！ – 2011-06-01 16:29:23

@TinyGiantStudios：如果一個方法有回調，這是有道理的。 – Marcel 2011-06-01 16:35:48

不知道這會幫助，但嘗試的代碼更改爲：

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

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

來源

2011-06-01 15:44:05

堅果，只是試過 - 但現在我只收到錯誤消息，無論我選擇哪個商店。任何其他想法？ – 2011-06-01 15:49:44

爲什麼它好？它不會隱藏不必要的塊。 – 2011-06-01 15:50:52

它與下拉菜單綁定。如果我選擇一家商店，而且沒有成果，那麼它應該顯示錯誤消息。現在確實發生了，但只有一次。如果我從下拉菜單中選擇另一個選項，原始的錯誤將不會被h3.list_heading取代...我是否有意義？ – 2011-06-01 15:57:42

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

我希望這個作品。上帝保佑！

來源

2011-06-01 16:29:23

Jeepers，我永遠不會想到這一點！我會用上面的解決方案做一些錯誤檢查（目前爲止這麼好） - 但是如果我拿起任何東西，我肯定會嘗試解決您的解決方案。非常感謝你對這個問題的看法... – 2011-06-01 16:40:43

當Div可見時顯示標題

回答

相關問題