Question

我是jQuery的新手但是能够使用我发现的一些脚本来获得我想要的结果，只有一个例外。我正在处理的页面有4个下拉菜单，允许用户从每个菜单中进行选择，然后单击一个返回列表结果的提交按钮。

目前，如果你做了一些选择，如果发现什么都没有，你只会得到一个空白页面。我需要显示“找不到结果”。我在这里看到的一些脚本需要我重写我的内容，但我认为有一个简单的解决方案。如果没有，它会回到我的键盘上。

以下是jsFiddle上的代码：http://jsfiddle.net/LbUfe/

这是我用来进行选择的脚本。

<script type="text/javascript">     
        $(document).ready(function()
        {               
            $("#btnFilter").click(function()
            {
                var portfolio   = $("#portfolio").val();
                var strategy    = $("#strategy").val();
                var geoFocus    = $("#geoFocus").val();
                var spendType   = $("#spendType").val();
                var portfolioSelector = '';
                var strategySelector = '';      
                var geoFocusSelector = '';
                var spendTypeSelector = '';

                if (portfolio == "all" && strategy == "all" && geoFocus == "all" && spendType == "all")                     
                {
                    //show all items in list - working
                    $(".item").show();
                }

                else
                {
                    if (strategy != "all")
                    {
                        strategySelector = '.' + strategy
                    }

                    if (portfolio != "all")
                    {
                        portfolioSelector = '.' + portfolio 
                    }
                    if (geoFocus != "all")
                    {
                        geoFocusSelector = '.' + geoFocus
                    }
                    if (spendType != "all")
                    {
                        spendTypeSelector = '.' + spendType
                    }
                    $(".item").hide();
                    $(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show(); 
                     }  

            });

        });

这是工作页面（减去“未找到结果”）。

http://staging.humanityunited.org/

一个简单示例：从“地理焦点”菜单中选择“孟加拉国”，并选择“支出类型”菜单中的“赞助”，然后点击提交。你会得到一个空白页面。

Answer 1

正如我在你的html中看到的，所有可能的结果都有一个类.item。因此，如果没有显示.item，则表示打印“未找到结果”的时间。你可以在jQuery中实现这个目的：

if($('li.item:visible').length===0)) // no item visible
{
    // put code here to display your message
}

Answer 2

您可以添加一项检查，以查看有多少列表元素可见。

var visibleElements = $('#colRight li:visible').length;

http://jsfiddle.net/LbUfe/5/

Answer 3

尝试更改

$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show();

到

var $res = $(strategySelector + "," + portfolioSelector + "," + geoFocusSelector + "," + spendTypeSelector).show();
if ($res.length == 0) {
    $res.html("No results found");
}

$res.show();

（Updated fiddle）

看起来您的问题是您要附加所有这些选择器，因此只显示所有这些选择器的内容。因此，我在选择器之间添加了coma。

Answer 4

我认为这样更好

var ItemsCount=$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show().length;
if(ItemsCount= 0)
{
    //show your message
}

搜索后显示“未找到结果”

4 个答案: