jQuery：根據元素可見性顯示/隱藏警報

我正在製作一個基於各種過濾器組合顯示結果的工作列表頁面。當沒有一組過濾器的結果時，我想要顯示「不匹配」消息，並且我想通過基於作業列表元素的可見性的click函數來顯示/隱藏p元素。每份工作清單都包含在li.requisition-item;我試圖以兩種不同的方式測試基於其他SO線程的可視性。這是我迄今：jQuery：根據元素可見性顯示/隱藏警報

$(".requisition-filter a").on("click", function() { 

    if ($('.requisition-item').is(":visible").length == 0 || $('.requisition-item').css('display') == 'none') { 
     $('p.no-results').show(); 
     console.log('show alert'); 
    } 
    else if ($('.requisition-item').is(":visible").length || $('.requisition-item').css('display') == 'block') { 
     $('p.no-results').hide(); 
     console.log('hide alert'); 
    } 
    else { 
     $('p.no-results').hide(); 
    } 
});

因此，我有一個段落元素與類no-results應該表明基於這些條件/隱藏，但如預期的腳本不行爲。警報將（有時）正確顯示，但當過濾器再次顯示清單時，不會適當地「重新隱藏」。任何想法這裏有什麼問題？

來源

2016-09-20 nickpish

有點離題，但你的網站是美麗的。我喜歡設計 – Chax

'.is（「：visible」）'返回一個布爾值，無論是true還是false，它沒有長度 – adeneo

@adeneo是正確的，也許你應該用.filter替換.is然後使用.length – KiiroSora09

在附帶的解決方案中，我通過單擊「過濾出項目」按鈕（與我單擊俄羅斯時相同）來僞造過濾項。這會檢查是否有任何結果可見，並相應地顯示no結果消息。

$("button.filter").click(function() { 
 
    $(".item").toggle(); 
 
    checkResults(); 
 
}); 
 

 
function checkResults() { 
 
    var $items = $(".item"); 
 

 
    if ($items.filter(":visible").length == 0) { 
 
    $(".message").show(); 
 
    } else { 
 
    $(".message").hide(); 
 
    } 
 
}

.message { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    left: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="message">No results!</div> 
 
<button class="filter">Filter out items</button> 
 
<ul> 
 
    <li class="item">Item 1</li> 
 
    <li class="item">Item 2</li> 
 
</ul>

來源

2016-09-20 04:24:42 Passersby

謝謝@Passersby，我會嘗試你的方法並報告回來！ – nickpish

jQuery：根據元素可見性顯示/隱藏警報

回答

相關問題