我正在开发一个工作列表页面,该页面显示基于各种过滤器组合的结果。当一组过滤器没有结果时,我希望出现“无匹配”消息,我想我只是通过 click
显示/隐藏 p
元素> 基于职位列表元素可见性的功能。每个职位列表都包含在一个 li.requisition-item
中;我尝试以两种不同的方式测试基于其他 SO 线程的可见性。这是我到目前为止所拥有的:
$(".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
类的段落元素,它应该根据这些条件显示/隐藏,但脚本没有按预期运行。警报将(有时)正确显示,但不会在过滤器再次显示列表时适本地“重新隐藏”。知道这里出了什么问题吗?
最佳答案
在附加的解决方案中,我只是通过单击“过滤掉元素”按钮(就像我单击俄罗斯一样)来伪造过滤掉元素。这会检查是否有任何结果可见,并相应地显示无结果消息。
$("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>
关于javascript - jQuery:根据元素可见性显示/隐藏警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39584632/