2

作成に問題はありません。私の問題は、空のリターンを検出しようとしたときです。私はjsFiddleを検査する準備をしました。私が求めるものの「B」をクリックしますが、確実な方法です。

基本的に、賢い方法で結果が空かどうかを確認しようとしていますか?

jsFiddle の例。

jQuery:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();;
    filters.parent().hide();

    filters.each(function(i) {
        var compareFirstLetter = $(this).text().substr(0,1);
        if ( compareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
        }

        //problem on detecting empty one. Press 'B' for example.
        //i can reach manually but this way is useless
        if (takeLetter ==='B') {console.log('There is no result.');}
    });

});

</p>

html:

<ul class="alphabet">
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
    <li><a>...</a></li>
</ul>

<ul class="medical_dictionary">
      <li><strong>Abdominoplasti</strong>: Lorem ipsum.</li>
      <li><strong>Absans</strong>: Lorem ipsum.</li>
      <li><strong>Abse</strong>: Lorem ipsum.</li>
      <li><strong>....</strong>: Lorem ipsum.</li>
</ul>
4

5 に答える 5

4

以下を試してください：

新しいアルファベットがクリックされるたびfoundに設定される新しい変数を追加したことに注意してください。falseこの変数は、文字に一致する辞書エントリが見つかるとすぐに true に設定されます。

ループの後に同じ変数がチェックされ、関連するエントリが見つかったかどうかを確認するか、エントリが見つからない場合は結果を表示しないようになりました。

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    var found = false;
    filters.parent().hide();

    filters.each(function(i) {
        var compareFirstLetter = $(this).text().substr(0,1);
        if ( compareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
            found = true;
        }
    });
    if (!found) {console.log('There is no result.');}
});
于 2012-09-27T13:06:56.307 に答える
2

アラートは、 の 2 番目の要素にfilters到達した瞬間に常にトリガーされます。どうですか：

triggers.click(function() {
    var takeLetter = $(this).text(), result = 0;
    filters.parent().hide();

    filters.each(function(i) {
        if ( RegExp('^'+takeLetter).test($(this).text()) ) {
            result += 1;
            $(this).parent().fadeIn(222);
        }
    });
    if (result<1) {alert('There is no result.');}
});

この jsfiddleを参照してください </p>

于 2012-09-27T13:07:59.773 に答える
1

次のように書き直しました (HTML ではなく JavaScript のみ): jsFiddle .

私がやっていることは、最初に大文字に基づいてエントリをフィルタリングし、要素が見つからない場合は関数から戻ることです。

ただし、要素が見つかった場合は、それらのサブセットのみを反復処理して表示します。

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var availableResults = filters.filter(function (f) {
        return $(this).text()[0] === takeLetter;
    });

    if (!availableResults.length) {
        console.log('There is no result.');
        return;
    }

    availableResults.each(function(i) {
        $(this).parent().fadeIn(222);
    });
});

</p>

于 2012-09-27T13:16:53.780 に答える
0

一種のカウンターが必要です。

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
var takeLetter = $(this).text();;
var matches = filters.length;
filters.parent().hide();

filters.each(function(i) {
    var compareFirstLetter = $(this).text().substr(0,1);
    if ( compareFirstLetter ==  takeLetter ) {
        $(this).parent().fadeIn(222);
    }

    if (takeLetter != compareFirstLetter)
        matches--;
});

if (matches == 0)
    console.log('There is no result.');
});

http://jsfiddle.net/jezen/AeGQt/34/

于 2012-09-27T13:15:51.247 に答える
0

コードを変更して、.letter-A各strong要素にクラスのようなものを追加しました。これらをカウント/非表示/表示するだけです。これは少し簡単だと思います：

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

filters.each(function(){
    $(this).addClass('letter-' + $(this).text().substr(0,1));
});

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var matches = filters.filter('.letter-' + takeLetter);
    matches.parent().fadeIn(222);

    if (matches.length == 0) {
        alert('There is no result for ' + takeLetter);
    };

});
​

フィドルを参照してください: http://jsfiddle.net/adamh/AeGQt/31/

于 2012-09-27T13:11:00.500 に答える