-2

私は検索機能に取り組んでおり、4 つのタブ (タブペイン) のそれぞれに「検索結果がありません」という情報を表示したいと考えています。代わりに、「検索結果がありません」というメッセージが複数回表示されます。作成する前に毎回 div を削除します。フィドルを参照してください。

HTML 構造は次のようになります。

<div class="tab-content">
<div class="tab-pane active" id="Incoming">

    <div class="accordion" id="accordionIncoming"> </div>
</div>
<div class="tab-pane" id="Escalation">
    <div class="accordion" id="accordionEscalation"> </div>
</div>
<div class="tab-pane" id="Outgoing">
    <div class="accordion" id="accordionOutgoing"> </div>
</div>
<div class="tab-pane" id="Manual-tasks">
    <div class="accordion" id="accordionManual-tasks"> </div>
</div>
</div>

関連する JavaScript は次のとおりです。

...
else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){
            $('#well-exists').remove();
            $('.tab-pane').append('<div class="well well-small" id="well-exists">No search results.</div>');

        } 

更新:代わりに表示/非表示を使用して解決しました。タブコンテンツに追加された HTML:

<div class="tab-content">
<div class="well well-small" id="well-exists" style="display:none;">No search results.      </div>

そしてJavaScript:

    $.each(cachedText, function (i, v) {
        if (searchTerm.length > 0 && v.indexOf(searchTerm) !== -1) {

            $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show();
            $('.accordion-body').addClass("in").css('height', 'auto');
            countNoResults++;

            if (v.indexOf(searchTerm) !== -1) {
            $('#well-exists').hide();  
            }
        }
        else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){
            console.log("show");
            $('#well-exists').show();


        }         
    });
4

1 に答える 1

0

クラス 'tab-pane' を持つ複数の要素があり、cachedText のエントリごとに 1 回 'No Search Results' div を追加しているため、メッセージが複数回表示されます。

于 2013-08-22T20:56:46.533 に答える