javascript - indexof 在变量为空或指定值之前不会更改，即使它应该检查每个 keyup 事件

Question

我无法在每次keyup上更新我的compatibilityIndex bool 值，因为它所依赖的indexof的值仅当搜索值之一为空或具有指定值(例如“大米”或“红酒”)时才会更新自身。有谁知道，为什么会发生这种情况，即使它应该在每个 keyup 事件上检查它？

<div class="row">
    <h1 class="big col-xs-12">Prepare your dinner according to the reference of mixing rules to attain the optimum harmony of taste.</h1>
</div>
    <hr />
    <h2 class="searchQ">Main ingredient</h2>
    <input type="text" name="ingredient1" class="search search1" value="">
    <hr />
    <h2 class="searchQ">Complementary ingredient</h2>
    <input type="text" name="ingredient2" class="search search2" value="">
    <hr />
    <h1>You <span class="can">can</span> mix <span class="searchVal1"></span> <span class="and"></span> <span class="searchVal2"></span> with:</h1>
    <ul class="list1"></ul>
    <ul class="list2"></ul>
    <script>
        var redWine = ['Red Wine','Cheese','Cured Meats','Red Meat'];
        var rice = ['Rice','White Wine','Chicken'];
        var whiteWine = ['White Wine','Chicken','Oyster','Rice'];

        var notFound = "Nope, don't think you can eat that";

        var search = $('.search');
        var search1 = $('.search1');
        var search2 = $('.search2');
        var search1conv = [];
        var search2conv = [];
        var compatibilityIndex = false;
        var can = $('.can');
        var searchVal1 = $('.searchVal1');
        var and = $('.and');
        var searchVal2 = $('.searchVal2');
        var list1 = $('.list1');
        var list2 = $('.list2');

        function checking(checkedVal, searchConv, list) {
            switch ( checkedVal.toLowerCase() ) {
                case 'red wine':
                case 'wine red':
                case 'wine, red':
                    list.empty();
                    searchConv = redWine;
                    for (var i = 1; i < redWine.length; i++) {
                        list.append('<li>' + redWine[i] + '</li>');
                    }
                    break;
                case 'rice':
                    list.empty();
                    searchConv = rice;
                    for (var i = 1; i < rice.length; i++) {
                        list.append('<li>' + rice[i] + '</li>');
                    }
                    break;
                case 'white wine':
                case 'wine white':
                case 'wine, white':
                    list.empty();
                    searchConv = whiteWine;
                    for (var i = 1; i < whiteWine.length; i++) {
                        list.append('<li>' + whiteWine[i] + '</li>');
                    }
                    break;
                default:
                    list.empty().append('<h2>' + notFound + '</h2>');
                    break;
            }
        }
        var compatible = function(ing1, ing2) {
            if ( ing1.indexOf(ing2[0]) > -1 && ing2.indexOf(ing1[0]) > -1 ) {
                compatibilityIndex = true;
            } else {
                compatibilityIndex = false;
            }
        }

        var main = function() {
            search.keyup(function() {
                if (search1.val() != 0 || search2.val() != 0) {
                    if (search1.val() != 0) {
                        checking( search1.val() , search1conv , list1 );
                    } else {
                        list1.empty();
                    }
                    if (search2.val() != 0) {
                        checking( search2.val() , search2conv , list2 );
                    } else {
                        list2.empty();
                    }
                } else {
                    searchVal1.empty();
                    searchVal2.empty();
                    list1.empty();
                    list2.empty();
                }
                if (search1.val() != 0 && search2.val() != 0) {
                    compatible(search1conv, search2conv);
                    if (compatibilityIndex) {
                        can.text('can').removeClass('red').addClass('green');
                    } else {
                        can.text('can\'t').removeClass('green').addClass('red');
                    }
                    searchVal1.text( search1.val() );
                    and.text('and' + " " + search1conv.indexOf(search2conv[0]) + " " + search2conv.indexOf(search1conv[0]));
                    searchVal2.text( search2.val() );
                } else {
                    if (search1.val() == 0) {
                        can.text('can').removeClass('red').removeClass('green');
                        searchVal1.empty();
                        and.empty();
                    } else {
                        searchVal1.text( search1.val() );
                    }
                    if (search2.val() == 0) {
                        can.text('can').removeClass('red').removeClass('green');
                        searchVal2.empty();
                        and.empty();
                    } else {
                        searchVal2.text( search2.val() );
                    }
                }
            });
        }

        $(document).ready(main);
    </script>

Answer 1

首先，请允许我道歉，这不是您问题的答案，但当我开始查看您的代码时，我发现变量和函数中有大量冗余。这会使您的代码更加复杂并且更难以调试。我将从简化代码开始。例如，您不需要checking1和checking2函数——它们都做同样的事情，只是对不同的数据进行操作。通过向函数传递更多数据，您可以使用一个函数来处理两组数据:

function checking(checkedVal, searchConv, list) {
    switch ( checkedVal.toLowerCase() ) {
        case 'red wine':
        case 'wine red':
        case 'wine, red':
            list.empty();
            searchConv = redWine;
            for (var i = 1; i < redWine.length; i++) {
                list.append('<li>' + redWine[i] + '</li>');
            }
            break;
        case 'rice':
            list.empty();
            searchConv = rice;
            for (var i = 1; i < rice.length; i++) {
                list.append('<li>' + rice[i] + '</li>');
            }
            break;
        case 'white wine':
        case 'wine white':
        case 'wine, white':
            list.empty();
            searchConv = whiteWine;
            for (var i = 1; i < whiteWine.length; i++) {
                list.append('<li>' + whiteWine[i] + '</li>');
            }
            break;
        default:
            list.empty().append('<h2>' + notFound + '</h2>');
            break;
    }
}

我在您的代码中看到了许多其他冗余示例。再次抱歉 - 我知道您没有寻求此建议，但我相信从长远来看，它将帮助您找到遇到的任何问题。