我正在尝试添加一条消息,如果有人的搜索结果为空,我可以显示该消息。类似于“这里似乎什么都没有。”
我正在使用 Isotope.JS 来处理我的过滤,并尝试使用基于长度的 JS If/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>
你可以在这个 codepen 看到一个例子强>。
它似乎不想附加我的类(class),因为它无法获得我在 examples-container
中的示例的长度。 .
最佳答案
好吧,我找到了我的答案。基本上,我需要在 keyup
或 search 函数 的末尾添加 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>
这是我的 final result .
关于javascript - 将 'error' 消息添加到 Isotope.JS 搜索过滤器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36434379/