2

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

我的小提琴

它几乎可以工作了。问题是“无结果”消息在需要时显示，但在应该时不隐藏。任何帮助将不胜感激。

4

7 回答 7

2

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

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

编辑：虽然这可行，但我建议使用下面的 RepWhoringPeeHaa 解决方案，使用 show()/hide() 而不是直接设置内容。

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

于 2012-04-24T20:07:27.480 回答
2

您可以将内容设置为空：

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

或者默认情况下将文本添加到NoResults元素中并默认使用 CSS 将其隐藏 ( display: none)。然后切换到显示/隐藏。

        if ($('.item:visible').length === 0) {
            $(".NoResults").show();
        } else {
            $(".NoResults").hide();
        }
于 2012-04-24T20:07:53.230 回答
1

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

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

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

于 2012-04-24T20:06:48.287 回答
1 
if ($('.item:visible').length === 0)
    $(".NoResults").html("<p>No events for your selection.</p>");
else   // <==============
    $(".NoResults").empty(); // <==============

更新小提琴

于 2012-04-24T20:07:28.453 回答
0

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

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

于 2012-04-24T20:07:02.893 回答
0

因为代码是从上到下运行的，所以总是从隐藏开始noresult，当它应该显示时，就这样显示：

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

于 2012-04-24T20:07:34.220 回答
0 
if ($('.item:visible').length === 0) {
    $(".NoResults").html("<p>No events for your selection.</p>");
}
else{
 $(".NoResults").html("");
}
于 2012-04-24T20:07:52.240 回答