Question

我正在建立一个网络应用，用户可以在其中键入任何关键字或语句，并使用维基百科API从维基百科获得20个结果。 AJAX工作得很好。当Web应用程序从维基百科中提取数据时，它应该在动态创建的DIV中显示每个结果。

当点击事件被触发时，会发生二十个DIV，共计创建一百个DIV。我不知道为什么，但正如您在下面的代码段中所看到的，当点击事件被触发时，Web应用为每个已隐藏的DOM元素（通过.hide）创建了20个DIV。

这里是代码：

＆＃13;

function main() {

function positive() {

    var bar = document.getElementById("sb").childNodes[1];
    var value = bar.value;
    if (!value) {
    	window.alert("Type in anything to start the research");
    } else {
    	var ex = /\s+/g;
    	var space_count = value.match(ex);
    	if (space_count == null) {
            var new_text = value;
    	} else {
    		new_text = value.replace(ex, "%20");
    		//console.log(new_text);
    	}

        url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&continue=-%7C%7C&srsearch=" + new_text + "&srlimit=20&sroffset=20&srprop=snippet&origin=*";

        var request = new XMLHttpRequest();
        request.open("GET", url);
        //request.setRequestHeader("Api-User-Agent", "Example/1.0");
        request.onload = function() {
	        var data = JSON.parse(request.responseText);
	        render(data);
	        //console.log(data);
        }
        request.send();
    }

}

function render(data) {

    $("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
    	$("#sb input").css({
    		"float":"left",
    		"margin-left":"130px"
    	});
    	$("#first_btn").css({
    		"float":"left"
    	});
      
          var title = data.query.search[0].title;
          var new_text = document.createTextNode(title);
    	    var new_window = document.createElement("div");
          new_window.appendChild(new_text);
          new_window.setAttribute("class", "window");

    	    var position = document.getElementsByTagName("body")[0];
    	    position.appendChild(new_window);

      //}
    });
        
}

var first_btn = document.getElementById("first_btn");
first_btn.addEventListener("click", positive, false);

}

$(document).ready(main);

＆＃13;

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;ù
}

.align {
	text-align: center;
}

#first_h1 {
	margin-top: 30px;
}

#first_h3 {
	margin-bottom: 30px;
}

#sb {
	margin-bottom: 10px;
}

#second_h1 {
	margin-top: 30px;
}

#second_h3 {
	margin-bottom: 30px;
}

.window {
	width: 70%;
	height: 150px;
	border: 3px solid black;
	margin: 0 auto;
	margin-top: 20px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Wikipedia Viewer</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

	<h1 class="align" id="first_h1">Wikipedia Viewer</h1>
	<h3 class="align" id="first_h3">Type in a key word about the topic you are after<br>and see what Wkipedia has for you..</h3>

	<p class="align" id="sb">
		<input type="text" name="search_box" placeholder="Write here">
		<label for="search_box">Your search starts here...</label>
	</p>
	<p class="align" id="first_btn">
		<input type="submit" value="SEND">
	</p>

	<h1 class="align" id="second_h1">...Or...</h1>
	<h3 class="align" id="second_h3">If you just feel eager of random knowledge,<br>punch the button below and see what's next for you...</h3>

	<p class="align" id="second_btn">
		<input type="submit" value="Enjoy!">
	</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
	window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')
    </script>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

＆＃13;

我通过擦除for循环使代码更容易阅读。如您所见，即使只有一个结果，它也会显示五次。

你知道男人为什么会这样吗？感谢

Answer 1

该行：

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})

表示，对于此＆＃34;列表＆＃34;中的每个元素，隐藏元素并在隐藏后运行此代码块。

Answer 2

这段代码是罪魁祸首：

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", 
function() {...});

回调函数被调用五次，每个ID列出一个，而不是一次，正如您所期望的那样。

解决方法是创建一个类（例如，＆＃34; hideme＆＃34;），将其应用于您要隐藏的每个元素，然后编写：

$('.hideme').hide("slow", function() {...});

Answer 3

function render(data) {

    $("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
        $("#sb input").css({
            "float":"left",
            "margin-left":"130px"
        });
        $("#first_btn").css({
            "float":"left"
        });
    });  // Finish it here..
          var title = data.query.search[0].title;
          var new_text = document.createTextNode(title);
            var new_window = document.createElement("div");
          new_window.appendChild(new_text);
          new_window.setAttribute("class", "window");

            var position = document.getElementsByTagName("body")[0];
            position.appendChild(new_window);

      //}
  //  });   Move this line..

}

Answer 4

如docs：

中所述

完成：动画完成后调用的函数，每个匹配元素调用一次。

这意味着这一行将使用5个匹配的元素调用handle函数5次。

$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {

最简单的解决方案是将渲染代码移到隐藏事件处理程序之外

在click事件上多次触发的方法

4 个答案: