Question

我试图为FreeCodeCamp挑战解决这个挑战，而我遇到了一个问题，我不知道如何解决。

这是指向Codepen的链接，我已将所有代码放入其中：Click here

基本上问题在于最后一个用于搜索用户列表的功能。我做了这样的事情，每当搜索表单的值发生变化时，它就会遍历用户对象并隐藏那些不包含任何插入字符的对象。

整个代码工作正常，特别是因为我console.log() - 函数中变量的所有变体，但在前端一侧它在两次迭代后停止。例如，如果我搜索Nelari，代码会在我插入N后隐藏大多数用户，当我键入e时会隐藏更多用户，但在这两次迭代之后它会停止。在控制台上，它继续并返回正确的结果，直到最后但在前端站点它才停止。

除此之外，我已经注意到，即使某些展示用户在我搜索的内容方面是正确的，它也会保留一些不包含任何字符的内容。我已经投入了。

为简单起见，我也将函数代码放在这里：

`

// SEARCH FORM 
 window.addEventListener('input', function (e) {
        var searchQuery = $("input").val().toLowerCase().replace(/[^A-Z0-9_]/ig, "");
    search(Acc, searchQuery);   
    }, false);

function search (accounts, what) {
    console.log(what);
    if (what.length > 0) {
        Object.keys(accounts).forEach(function(key) {
            var IDD = "." + key;
            console.log(IDD)
            accQuery = key.toLowerCase();
            console.log(accQuery);
            if (accQuery) { 
                if ( accQuery.indexOf(what) >= 0 ) {
                    $(IDD).css({"display": "block"});   
                    console.log("FOUND!");
                };
                if ( accQuery.indexOf(what) == -1 ) { 
                    $(IDD).css({"display": "none"});
                    console.log("NOT FOUND!");
                };
            };

        });
    }
    else if ( what.length < 1 ) {
        Object.keys(accounts).forEach(function(key) {
            var IID = "." + key;
            $(IID).css({"display": "block"});
        });
    };
};`

Answer 1

正如我在您的代码中看到的那样，您正在按类选择要隐藏的元素。帐户的关键字可以是大写，li类是小写的。由于CSS选择器区分大小写（http://reference.sitepoint.com/css/casesensitivity），因此找不到要隐藏的正确元素。如果你使用accQuery获取元素而不是键，它将起作用。

   accQuery = key.toLowerCase();
   console.log(accQuery); 

   var IDD = "." + accQuery ;
   console.log(IDD)

输入表单问题并循环遍历对象

1 个答案: