我正在开发搜索功能,并希望在四个选项卡(选项卡窗格)中显示“无搜索结果”信息。相反,多次显示“无搜索结果”消息。我每次创建它之前都会删除它。 请参阅Fiddle。
HTML结构如下:
<div class="tab-content">
<div class="tab-pane active" id="Incoming">
<div class="accordion" id="accordionIncoming"> </div>
</div>
<div class="tab-pane" id="Escalation">
<div class="accordion" id="accordionEscalation"> </div>
</div>
<div class="tab-pane" id="Outgoing">
<div class="accordion" id="accordionOutgoing"> </div>
</div>
<div class="tab-pane" id="Manual-tasks">
<div class="accordion" id="accordionManual-tasks"> </div>
</div>
</div>
相关的javascript是这样的:
...
else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){
$('#well-exists').remove();
$('.tab-pane').append('<div class="well well-small" id="well-exists">No search results.</div>');
}
更新:我通过使用show / hide解决了它。 HTML添加到tab-content:
<div class="tab-content">
<div class="well well-small" id="well-exists" style="display:none;">No search results. </div>
和javascript:
$.each(cachedText, function (i, v) {
if (searchTerm.length > 0 && v.indexOf(searchTerm) !== -1) {
$infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show();
$('.accordion-body').addClass("in").css('height', 'auto');
countNoResults++;
if (v.indexOf(searchTerm) !== -1) {
$('#well-exists').hide();
}
}
else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){
console.log("show");
$('#well-exists').show();
}
});
答案 0 :(得分:0)
您多次看到该消息,因为您有多个带有“tab-pane”类的元素,并且因为您正在为cachedText中的每个条目附加一次“No Search Results”div。