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

您的警报将始终在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

我重写了它（只有 JavaScript，不是 HTML）如下：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

.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 回答
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 回答