Question

我有一些代码，我根据2个选择下拉菜单中的选项显示/隐藏DIV。这很有效。现在，当没有任何内容符合选择时，我正试图显示“无结果”消息。

它几乎正常工作。问题是“无结果”消息显示何时需要，但不应隐藏何时应该。非常感谢任何帮助。

Answer 1

您似乎缺少清空NoResults类内容的条件。我编辑了小提琴：

if ($('.item:visible').length === 0) {
   $(".NoResults").html("<p>No events for your selection.</p>");
 } else { // NEW ELSE CLAUSE
   $(".NoResults").empty();
 }

编辑：虽然这有效，但我建议使用show（）/ hide（）使用RepWhoringPeeHaa的解决方案，而不是直接设置内容。

我对该解决方案的主要论点是它在html模板中保留了更多内容（“没有选择事件。”），并且在代码之外。分离内容/代码越好，将来更新内容就越容易。

Answer 2

你可以set the contents to nothing：

        if ($('.item:visible').length === 0) {
            $(".NoResults").html("<p>No events for your selection.</p>");
        } else {
            $(".NoResults").html('');
        }

或者只是默认情况下将文本添加到NoResults元素并默认使用CSS隐藏它（display: none）。 And then toggle to display/hide

        if ($('.item:visible').length === 0) {
            $(".NoResults").show();
        } else {
            $(".NoResults").hide();
        }

Answer 3

检查无结果后添加else语句：

        if ($('.item:visible').length === 0) {
            $(".NoResults").html("<p>No events for your selection.</p>");
        }
        else $(".NoResults").html("");

这是您更新的jsFiddle：http://jsfiddle.net/hDWAh/8/

Answer 4

if ($('.item:visible').length === 0)
    $(".NoResults").html("<p>No events for your selection.</p>");
else   // <==============
    $(".NoResults").empty(); // <==============

Updated Fiddle

Answer 5

一种方法是每次切换可见性，

http://jsfiddle.net/hDWAh/7/

Answer 6

因为代码是从上到下运行的，所以请始终隐藏noresult并在应该显示时，只需显示如下：

http://jsfiddle.net/hDWAh/4/

Answer 7

if ($('.item:visible').length === 0) {
    $(".NoResults").html("<p>No events for your selection.</p>");
}
else{
 $(".NoResults").html("");
}

jQuery检查隐藏的DIV然后显示消息

7 个答案: