1
私はcodepen上にある小さなプログラムをデバッグしようとしていますが、プログラムのシーケンス。コンソールを表示すると、プログラムが従っているステップが表示されます。プログラムは2番目、3番目、...の手順に従っていませんデバッグしようとしています（javascript）
2番目、3番目...検索後、プログラムはそれを実行する必要があるように手順に従いません。私はいくつかの助けに感謝します。
コードは、stackoverflowのスニペットで同じ方法で実行されないため、コードを実行してください。
http://codepen.io/rafahuelin/pen/JEdqOa?editors=0011
$(document).ready(function() {
//1 Appears the magnifier icon
\t console.log("1");
\t $("#created").addClass("created-start");
\t $("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
\t
//2 When clicking on the icon appears the input form
\t console.log("2");
\t $("#magnifier").on("click", function() {
\t \t \t $("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
\t \t \t $(".search-init").addClass("search-input").removeClass("search-init");
\t \t \t setTimeout(function() { \t \t //waits for 1s
\t \t \t \t readyToSearch();
\t \t \t }, 1000);
\t });
//3/9 input area prepared to search \t
function readyToSearch() {
\t console.log("3/9");
\t $("#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>");
\t $("#input-form").prop('disabled', false); //trying to debug *******************************
\t $("#input-form").focus();
\t
//4 After pressing Enter,
$("#search").on("submit", function(e) {
\t console.log("4");
\t var searchText = $("#input-form").val(); //<---JQuery /// var searchText = document.getElementById("input-form").value; <---In javascript
\t $("#input-form").prop('disabled', true); //Disable textbox to prevent multiple submit // trying to debug *****************************************
\t moveSearchUp(searchText);
\t sendToAPI(searchText);
\t return false;
});
} // input area prepared to search
//6 send request to API
function sendToAPI(searchText) {
\t console.log("6");
\t var searchRequest = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + searchText + "&namespace=&limit=10&callback=?";
\t var tmp = $.ajax({
\t \t \t \t url: searchRequest,
type: "GET",
async: false,
dataType: "json",
success: function (data, status, jqXHR) {
\t \t \t \t \t showList(data);
\t \t \t \t \t console.log("6 searchRequest: " + searchRequest);
\t \t \t \t \t console.log("6 searchText: " + searchText);
\t \t \t \t \t console.log("6 data[1]: " + data[1]);
},
\t \t \t \t error: function (errorMessage) {
\t \t \t \t \t console.log(errorMessage);
\t \t \t \t }
});
} \t
//7 show the results \t
function showList (data) {
\t console.log("7");
\t $("#results").addClass("results").html("<ul>");
\t for (i = 0; i < data[1].length; i++) {
\t \t $("#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>");
\t \t if(i != data[1].length - 1){
\t \t \t $("#results").append("<hr>")
\t \t }
\t }
\t $("#results").append("</ul>");
\t
\t //8 click on the close X
\t $("#close").on("click", function() {
\t \t console.log("8");
\t \t $("#results").remove();
\t \t $("#created").addClass("created-start");
\t \t readyToSearch();
\t });
\t
}
\t
//5 search-input moves up
function moveSearchUp(searchText) {
\t console.log("5");
\t $("#created").removeClass("created-start");
\t $(".search-input").removeClass("search-input").addClass("search-top");
\t setTimeout(function() { \t \t //waits for 1s
\t \t $("#input-form").css({'width': searchText.length * 12 + 'px'});
\t }, 500);
\t if ($("#close > i").hasClass("fa-times") === false) { \t
\t \t $("form").append("<div id='close'><i class='fa fa-times' aria-hidden='true'></i></div>"); \t
\t }
\t if ($("#created").hasClass("created-start") === false) {
\t \t $("#created").addClass("created-start");
\t }
} \t // end function moveSearchUp
\t
}); // $(document).ready.search-init {
\t height: 70px;
\t width: 70px;
\t border: 4px solid rgba(185, 18, 27, 1);
\t border-radius: 35px;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t position: absolute;
\t -webkit-animation-duration: 3s;
\t -ms-animation-duration: 3s;
\t -moz-animation-duration: 3s;
}
#magnifier-stick.stick-appears {
\t height: 20px;
\t width: 0;
\t border: 2px solid rgba(185, 18, 27, 1);
\t transform: rotate(-45deg);
\t top: 54px;
\t left: 54px;
\t position: absolute;
\t transition: all 0.2s ease;
}
#magnifier-stick.stick-disappears {
\t height: 0;
\t width: 0;
\t border: 2px solid rgba(185, 18, 27, 1);
\t transform: rotate(-95deg);
\t top: 54px;
\t left: 54px;
\t position: absolute;
\t transition: all 200ms ease;
\t -webkit-animation-duration: 0.2s;
\t -ms-animation-duration: 0.2s;
\t -moz-animation-duration: 0.2s;
}
#input-form, #input-form:focus {
\t width: 100%;
\t min-width: 120px;
\t border-radius: 35px;
\t outline: none;
\t border: none;
\t padding-left: 20px;
\t padding-right: 20px;
\t transition: all 500ms 500ms ease;
\t background-color: rgba(255,255,255,0);
}
.search-input{
\t line-height: 56px;
\t height: 70px;
\t width: 570px;
\t border: 4px solid rgba(185, 18, 27, 1);
\t border-radius: 35px;
\t top: 50%;
\t left: 50%;
\t transform: translate(-50%, -50%);
\t position: absolute;
\t transition: all 500ms 500ms ease;
\t 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 {
\t line-height: 40px;
\t height: 54px;
\t border: 4px solid rgba(185, 18, 27, 1);
\t border-radius: 27px;
\t top: 0;
\t left: 50%;
\t transform: translate(-50%, 0);
\t position: absolute;
\t transition: all 500ms 500ms ease;
}
input:-webkit-autofill{
\t background: none;
}
.results {
\t margin-left: auto;
\t margin-right: auto;
\t margin-top: 90px;
\t padding: 30px;
\t list-style: none;
\t letter-spacing: 2px;
}
.results a:hover {
\t text-decoration: none;
}
.result-item {
\t border-left: solid 7px rgba(185, 18, 27, 0);
\t margin-bottom: 15px;
\t padding: 15px;
}
.result-item:hover {
\t border-left: solid 7px rgba(185, 18, 27, 1);
\t transition: all ease 0.8s;
\t padding: 15px;
\t background-color: rgba(255,255,255,0.05);
}
.title {
\t font-size: 2.5rem;
\t font-weight: 500;
\t margin-top: 0;
\t color: #4C1B1B;
}
.description {
\t margin-bottom: 0;
\t color: #BD8D46;
}
hr {
\t border: 0;
height: 2px;
\t background-image: linear-gradient(to right, rgba(185, 18, 27, 0), rgba(185, 18, 27, 0.45), rgba(185, 18, 27, 0));
}
.created {
\t text-align: center;
\t margin: 40px;
\t font-size: 2.4rem;
\t letter-spacing: 2px;
\t text-decoration: none;
\t font-style: italic;
\t color: #B9121B;
}
.created-start {
\t position: absolute;
\t bottom: 45px;
\t left: 50%;
\t transform: translatex(-60%);
\t margin-bottom: 0;
}
.created a {
\t color: #B9121B;
\t font-size: 3.5rem;
\t text-decoration: none;
}
.name {
\t font-size: 2rem;
}
.created a:hover, .created a:visited {
\t color: #B9121B;
\t text-decoration: none;
}
/* .delete-search::after {
\t content: "<div id='close'><i class="fa fa-times" aria-hidden="true"></i></div>";
} */
#close {
\t float: right;
\t display: inline-block;
\t padding: 2px 10px;
\t background: none;
\t color: #B9121B;
\t font-size: 20px;
\t font-weight: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
\t <div id="results">
\t </div>
\t <footer>
\t \t <div id="created" class="created">
\t \t \t <span class="by">— </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"> —</span>
\t \t </div>
\t </footer>
</body>
</html>
してください詳細の手順は、スクリプトは、あなたの質問に従ってください。人々は質問ではなく答えを見つけるために働くのが好きです。 – daveyfaherty
@daveyfaherty Javascriptコードでは、コメントの数字を見ることができます。プログラムを実行すると、コンソールに数字が表示されるので、コードをデバッグするのが簡単になります。ユーザーは次の手順に従います：拡大鏡を1回クリックし、2回入力してEnterキーを押します。結果が表示されたらXを押して現在の検索をキャンセルし、新しい検索をキャンセルします。あなたが望む限り。それは100％働いていませんが、主な問題は、プログラムが目的のステップに従わない理由を知ることです。 – Rafa