javascript - Chrome 输出的内容与其他浏览器/IDE 不同

Question

问题

我正在为 FreeCodeCamp 制作一个维基百科查看器。当我使用 Jetbrains Webstorm IDE 执行代码时，我在搜索结果末尾总共创建了 10 个额外的 div。

当我使用 JSfiddle 执行此操作时，我看到了正确的结果，这应该只是最初的 10 个搜索结果，而不是 +10 个以上的空 div 容器。

知道发生了什么吗？

疑难解答

经过深入研究，这似乎更多是浏览器问题而不是 IDE 问题。看起来只有 Chrome 才这样做？我在 Firefox 和 IE 上尝试过，运行正常，就像 JSfiddle 一样。我还尝试清除 Chrome 上的所有 cookie 和缓存。

当我打开控制台日志并查看元素时，在 Chrome 中，明显有 10 个额外的空 div，如图所示 here.

但在 Firefox 中，相同的代码不会创建 div，如 here. 所示

编辑:好的，所以在 Chrome 中，如果您按 Enter 键，而不是单击搜索按钮，它会创建额外的 div。但如果您单击搜索图标，结果将正确显示。谁能解释为什么？我是否错误地放置/写入了 .keyup() 代码块？

这是上述 issue. 的图片

Javascript部分:

$(function(){
$("#search-bar").keyup(function(event) {
    if(event.keyCode === 13) {
        $(".btn").click();
    }
});
$(".btn").click(function() {
    $("#results").empty();
    var searchTerm = $("#search-bar").val();
    var url = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchTerm + "&utf8=&format=json&origin=*";
    console.log(url);
    $.ajax({
        cache: false,
        url: url,
        type: 'GET',
        success: function(data) {
            // Create a blank array to store the specific URLs in
            var urlArr = [];
            for (var i=0; i <= data.query.search.length; i++) {
                // Adding the variables for use here
                var headerData = data.query.search[i].title;
                var urlSearchTerm = headerData.replace(/\s/gi, '_');
                var snippetData = data.query.search[i].snippet + "...";
                var createDiv = document.createElement("div");
                var createHeader = document.createElement("h1");
                var createSnippet = document.createElement("p");
                var divId = "div" + i.toString();
                var headerId = "header" + i.toString();
                var snippetId = "snippet" + i.toString();
                var resultUrl = "https://en.wikipedia.org/wiki/";
                urlArr[i] = resultUrl + urlSearchTerm;
                // Create the div element, give it an id
                // Create <h1> element, give it an id
                // Create <p> element, give it an id
                // Give each <div> a class
                createDiv.setAttribute("id", divId);
                createHeader.setAttribute("id", headerId);
                createSnippet.setAttribute("id", snippetId);
                createDiv.setAttribute("class", "each-result");
                // appending <div> elements in the #results id element in body
                // appending <h1> element to the div element
                // appending <p> element to the div element
                document.getElementById("results").appendChild(createDiv);
                document.getElementById(divId).appendChild(createHeader);
                document.getElementById(divId).appendChild(createSnippet);
                // populate json data into <h1> element
                // populate json data into <p> element
                $("#header" + i.toString()).text(headerData);
                $("#snippet" + i.toString()).html(snippetData);
                // create a click event handler that does 2 things
                // 1. Gives each div an element that has a URL in the resultUrl array
                // 2. Opens that url in a new window
                (function(i) {
                    $("#div" + i.toString()).click(function() {
                        window.open(urlArr[i]);
                });
                }(i));



            }
        }
    });

});

$("#random-wiki-button").click(function() {
   window.open("https://en.wikipedia.org/wiki/Special:Random");
});

});

实际完整代码，包括html/css + JS:JSfiddle

Answer 1

也许尝试更新 chrome？

我会尝试将您的 for 循环更改为 for (var i=0; i < 10; i++) {这样增量就停止在第 10 项。

已编辑。