2

我是 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/

一个简单的例子：从“Geographic Focus”菜单中选择“Bangladesh”，在“Spending Type”菜单中选择“Sponsorship”，然后点击提交。你会得到一个空白页。

4

4 回答 4

2

正如我在您的 html 中看到的，所有可能的结果都有一个类 .item。因此，如果没有 .item 显示，则意味着该打印“未找到结果”。您可以在 jQuery 中实现这一点：

if($('li.item:visible').length===0)) // no item visible
{
    // put code here to display your message
}
于 2013-04-11T19:28:35.537 回答
0

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

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

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

于 2013-04-11T19:30:56.153 回答
0

尝试改变

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

至

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

$res.show();

（更新小提琴）

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

于 2013-04-11T19:32:40.590 回答
0

我认为这更好

var ItemsCount=$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show().length;
if(ItemsCount= 0)
{
    //show your message
}
于 2013-04-11T19:37:03.903 回答