该程序没有按照第二，第三，......搜索的步骤尝试调试（javascript）

时间：2017-01-10 10:18:48

标签： javascript jquery debugging

我试图调试我在codepen上的一个小程序，而且我对程序的顺序有问题。如果您显示控制台，您将看到该程序正在执行的步骤。

在第二次，第三次......搜索后，程序不会按照应该执行的步骤进行操作。我将不胜感激。

请在codepen上运行代码，因为它不会在stackoverflow的代码片段上以相同的方式运行。

http://codepen.io/rafahuelin/pen/JEdqOa?editors=0011

＆＃13;
＆＃13; 
$( document ).ready(function() {

//1 Appears the magnifier icon 
	console.log("1");
	$("#created").addClass("created-start");
	$("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
	
//2 When clicking on the icon appears the input form
	console.log("2");
	$("#magnifier").on("click", function() {
			$("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
			$(".search-init").addClass("search-input").removeClass("search-init");
			setTimeout(function() {		//waits for 1s
				readyToSearch();
			}, 1000);
	});

//3/9  input area prepared to search	
function readyToSearch() {
	console.log("3/9");
	$("#search").html("<div class='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
	$("#input-form").prop('disabled', false); //trying to debug *******************************
	$("#input-form").focus();

	
//4 After pressing Enter, 

$("#search").on("submit", function(e) {
	console.log("4");
	var searchText = $("#input-form").val(); //<---JQuery ///  var searchText = document.getElementById("input-form").value; <---In javascript
	$("#input-form").prop('disabled', true); //Disable textbox to prevent multiple submit // trying to debug *****************************************
	moveSearchUp(searchText);
	sendToAPI(searchText);
	return false;
});

} // input area prepared to search

//6 send request to API
function sendToAPI(searchText) { 
	console.log("6");
	var searchRequest = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + searchText + "&namespace=&limit=10&callback=?";
	var tmp = $.ajax({
				url: searchRequest,
        type: "GET",
        async: false,
        dataType: "json",
        success: function (data, status, jqXHR) {
					showList( data );
					console.log("6 searchRequest: " + searchRequest);
					console.log("6 searchText: " + searchText);
					console.log("6 data[1]: " + data[1] );
        },
				error: function (errorMessage) {
					console.log(errorMessage);
				}
    });
}	

//7 show the results	
function showList (data) {
	console.log("7");
	$("#results").addClass("results").html("<ul>"); 
	for (i = 0; i < data[1].length; i++) {
		$("#results").append("<div class='result-item'><a href='" + data[3][i] + "' target='blank_'><li> <h2 class='title'>" + data[1][i] + "</h2><p class='description'>" + data[2][i] + "</p></li></a></div>");
		if(i != data[1].length - 1){
			$("#results").append("<hr>")
		}
	}
	$("#results").append("</ul>");
	
	//8 click on the close X
	$("#close").on("click", function() {
		console.log("8");
		$("#results").remove();
		$("#created").addClass("created-start");
		readyToSearch();
	});
	
}
	
//5 search-input moves up 
function moveSearchUp(searchText) {
	console.log("5");
	$("#created").removeClass("created-start");
	$(".search-input").removeClass("search-input").addClass("search-top");
	setTimeout(function() {		//waits for 1s
		$("#input-form").css({'width': searchText.length * 12 + 'px'});
	}, 500);
	if ($("#close > i").hasClass("fa-times") === false) {	
		$("form").append("<div id='close'><i class='fa fa-times' aria-hidden='true'></i></div>");	
	}
	if ($("#created").hasClass("created-start") === false) {
		$("#created").addClass("created-start");
	}
}	// end function moveSearchUp
	


}); // $(document).ready
＆＃13; 
.search-init {
	height: 70px;
	width: 70px;
	border: 4px solid rgba(185, 18, 27, 1);
	border-radius: 35px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	-webkit-animation-duration: 3s;
	-ms-animation-duration: 3s;
	-moz-animation-duration: 3s;
}

#magnifier-stick.stick-appears {
	height: 20px;
	width: 0;
	border: 2px solid rgba(185, 18, 27, 1);
	transform: rotate(-45deg);
	top: 54px;
	left: 54px;
	position: absolute;
	transition: all 0.2s ease;
}

#magnifier-stick.stick-disappears {
	height: 0;
	width: 0;
	border: 2px solid rgba(185, 18, 27, 1);
	transform: rotate(-95deg);
	top: 54px;
	left: 54px;
	position: absolute;
	transition: all 200ms ease;
	-webkit-animation-duration: 0.2s;
	-ms-animation-duration: 0.2s;
	-moz-animation-duration: 0.2s;
}

#input-form, #input-form:focus {
	width: 100%;
	min-width: 120px;
	border-radius: 35px;
	outline: none;
	border: none;
	padding-left: 20px;
	padding-right: 20px;
	transition: all 500ms 500ms ease;
	background-color: rgba(255,255,255,0);
}

.search-input{
	line-height: 56px;
	height: 70px;
	width: 570px;
	border: 4px solid rgba(185, 18, 27, 1);
	border-radius: 35px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	transition: all 500ms 500ms ease;
	background-color: rgba(255,255,255,0);
}

/* Change the background color of the input */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #F6E497 inset;
}

.search-top {
	line-height: 40px;
	height: 54px;
	border: 4px solid rgba(185, 18, 27, 1);
	border-radius: 27px;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	position: absolute;
	transition: all 500ms 500ms ease;
}

input:-webkit-autofill{
	background: none;
}

.results {
	margin-left: auto;
	margin-right: auto;
	margin-top: 90px;
	padding: 30px;
	list-style: none;
	letter-spacing: 2px;
}

.results a:hover {
	text-decoration: none;
}

.result-item {
	border-left: solid 7px rgba(185, 18, 27, 0);
	margin-bottom: 15px;
	padding: 15px;
}

.result-item:hover {
	border-left: solid 7px rgba(185, 18, 27, 1);
	transition: all ease 0.8s;
	padding: 15px;
	background-color: rgba(255,255,255,0.05);
}

.title {
	font-size: 2.5rem;
	font-weight: 500;
	margin-top: 0;
	color: #4C1B1B;
}

.description {
	margin-bottom: 0;
	color: #BD8D46;
}

hr {
	border: 0;
  height: 2px;
	background-image: linear-gradient(to right, rgba(185, 18, 27, 0), rgba(185, 18, 27, 0.45), rgba(185, 18, 27, 0));
}

.created {
	text-align: center;
	margin: 40px;
	font-size: 2.4rem;
	letter-spacing: 2px;
	text-decoration: none;
	font-style: italic;
	color: #B9121B;
}

.created-start {
	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translatex(-60%);
	margin-bottom: 0;
}

.created a {
	color: #B9121B;
	font-size: 3.5rem;
	text-decoration: none;
}

.name {
	font-size: 2rem;
}

.created a:hover, .created a:visited {
	color: #B9121B;
	text-decoration: none;
}

/* .delete-search::after {
	content: "<div id='close'><i class="fa fa-times" aria-hidden="true"></i></div>";
} */

#close {
	float: right;
	display: inline-block;
	padding: 2px 10px;
	background: none;
	color: #B9121B;
	font-size: 20px;
	font-weight: 100;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="search">
  </div>
	<div id="results">
	</div>
	<footer>
		<div id="created" class="created">
			<span class="by">&mdash; </span> <a target="_blank" href="https://github.com/rafahuelin/"><span class="name">Rafa Huelin</span> <i class="fa fa-github" aria-hidden="true"></i></a> <span class="by"> &mdash;</span>
		</div>
	</footer>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

问题在于，每次调用 readyToSearch 函数时，都会绑定提交事件。 当您每次单击关闭按钮时调用 readyToSearch ，将再次绑定提交。

如果您将提交事件绑定移出 readyToSearch 函数，它将按预期工作。

$( document ).ready(function() {

//1 Appears the magnifier icon 
	console.log("1");
	$("#created").addClass("created-start");
	$("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");

//4 After pressing Enter, 
	$("#search").on("submit", function(e) {
		console.log("4");
		var searchText = $("#input-form").val(); //<---JQuery ///  var searchText = document.getElementById("input-form").value; <---In javascript
		$("#input-form").prop('disabled', true); //Disable textbox to prevent multiple submit // trying to debug *****************************************
		moveSearchUp(searchText);
		sendToAPI(searchText);
		return false;
	});
	
//2 When clicking on the icon appears the input form
	console.log("2");
	$("#magnifier").on("click", function() {
			$("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
			$(".search-init").addClass("search-input").removeClass("search-init");
			setTimeout(function() {		//waits for 1s
				readyToSearch();
			}, 1000);
	});

//3/9  input area prepared to search	
function readyToSearch() {
	console.log("3/9");
	$("#search").html("<div class='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
	$("#input-form").prop('disabled', false); //trying to debug *******************************
	$("#input-form").focus();

} // input area prepared to search

//6 send request to API
function sendToAPI(searchText) { 
	console.log("6");
	var searchRequest = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + searchText + "&namespace=&limit=10&callback=?";
	var tmp = $.ajax({
				url: searchRequest,
        type: "GET",
        async: false,
        dataType: "json",
        success: function (data, status, jqXHR) {
					showList( data );
					console.log("6 searchRequest: " + searchRequest);
					console.log("6 searchText: " + searchText);
					console.log("6 data[1]: " + data[1] );
        },
				error: function (errorMessage) {
					console.log(errorMessage);
				}
    });
}	

//7 show the results	
function showList (data) {
	console.log("7");
	$("#results").addClass("results").html("<ul>"); 
	for (i = 0; i < data[1].length; i++) {
		$("#results").append("<div class='result-item'><a href='" + data[3][i] + "' target='blank_'><li> <h2 class='title'>" + data[1][i] + "</h2><p class='description'>" + data[2][i] + "</p></li></a></div>");
		if(i != data[1].length - 1){
			$("#results").append("<hr>")
		}
	}
	$("#results").append("</ul>");
	
	//8 click on the close X
	$("#close").on("click", function() {
		console.log("8");
		$("#results").remove();
		$("#created").addClass("created-start");
		readyToSearch();
	});
	
}
	
//5 search-input moves up 
function moveSearchUp(searchText) {
	console.log("5");
	$("#created").removeClass("created-start");
	$(".search-input").removeClass("search-input").addClass("search-top");
	setTimeout(function() {		//waits for 1s
		$("#input-form").css({'width': searchText.length * 12 + 'px'});
	}, 500);
	if ($("#close > i").hasClass("fa-times") === false) {	
		$("form").append("<div id='close'><i class='fa fa-times' aria-hidden='true'></i></div>");	
	}
	if ($("#created").hasClass("created-start") === false) {
		$("#created").addClass("created-start");
	}
}	// end function moveSearchUp
	


}); // $(document).ready

相关问题
最新问题