2

私は jQuery の初心者ですが、1 つの例外を除いて、見つけたいくつかのスクリプトを使用して、必要な結果を得ることができました。私が取り組んでいるページには 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/

簡単な例: [地理的焦点] メニューから [バングラデシュ] を選択し、[支出タイプ] メニューで [スポンサーシップ] を選択して [送信] をクリックします。空白のページが表示されます。

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 に答える