向Isotope.JS搜索筛选器添加“错误”消息？
向Isotope.JS搜索筛选器添加“错误”消息？
提问于 2016-04-05 18:35:37
我试图添加一个信息，我可以显示，如果有人的搜索出现空。类似于“这里似乎什么都没有”的东西。
我使用Isotope.JS来处理我的筛选，并试图使用基于长度的JS /Else语句来显示这条错误消息。我似乎无法让它工作，因为控制台说，[0]对象一直在显示，即使在没有搜索时也是如此。
用于错误消息的JS函数
var exampleCount = $('.examples-container .example').length;
//shows empty state text when no jobs found
if(exampleCount == '0') {
$('.examples-container').addClass('empty');
}
else {
$('.examples-container').removeClass('empty');
}正在添加和删除的类
.empty-item {
transition-property: opacity;
transition-duration: 0s;
transition-delay: 0s;
transition-timing-function: ease;
display:none;
}
.empty .empty-item {
transition-property: opacity;
transition-duration: .2s;
transition-delay: .3s;
transition-timing-function: ease;
display:block !important;
}我的div将被隐藏/显示
<span class="empty-item">no results</span> 您可以在这个码页上看到一个例子。它似乎不想追加我的类，因为它无法在examples-container中获得我的示例的长度。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-06 14:18:25
好吧，所以我找到了答案。基本上，我需要在我的keyup或搜索函数的末尾使用if/else。看上去是这样的：
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
// display message box if no filtered items
if ( !$container.data('isotope').filteredItems.length ) {
$('#noResult').show();
} else {
$('#noResult').hide();
}
}) );然后我交换了我的HTML以使id更容易管理，所以我用它作为我的“无结果”div。
<div id="noResult">
<div>No results</div>
</div>这是我的最终结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36434379
复制相关文章
相似问题
腾讯云开发者
