Index.html 및 stylesheet.css는 잘 작동하지만 script.js는 작동하지 않습니다 (datepicker 기능 제공). 작동하지 않는 이유. 나는 얼마 동안 디버그합니다. 아무도 나를 도울 수 있습니까? 감사.
index.html :
<!DOCTYPE html>
<html>
<head>
<title>Pick a Date</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="header">
<h2><br/>Select a Destination</h2>
</div>
<div class="left">
<p>Departing: <input type="text" id="departing"></p>
</div>
<div class="right">
<p>Returning: <input type="text" id="returning"></p>
</div><br/>
<div id="main">
<p>Destination: <select id="dropdown">
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="beijing">Beijing</option>
<option value="moscow">Moscow</option>
</select></p>
<button>Submit</button>
</div>
</body>
</html>
stylesheet.css :
body {
background-color: #d0e4fe;
}
h2 {
font-family: Verdana, Arial, sans-serif;
text-align: center;
color: #FFFFFF;
}
#header {
width: 100%;
height: 70px;
position: relative;
top: -40px;
background-color: #7FC7AF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
p {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
}
.left {
position: relative;
top: -40px;
float: left;
}
.right {
position: relative;
top: -40px;
float: right;
}
#main {
position: relative;
top: 170px;
float: left;
}
script.js :
$(document).ready(function() {
$("#departing").datepicker();
$("#returning").datepicker();
$("button").click(function() {
var selected = $("#dropdown option:selected").text();
var departing = $("#departing").val();
var returning = $("#returning").val();
if (departing === "" || returning === "") {
alert("Please select departing and returning dates.");
} else {
confirm("Would you like to go to " + selected + " on " + departing + " and return on " + returning + "?");
}
});
});
사용자 지정 JQuery 스크립트 앞에 JQuery 스크립트를 포함합니다.
이렇게 :
<head>
<title>Pick a Date</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'/>
<!-- You need this script too -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
이는 사용자 정의 JS 스크립트가 JQuery의 함수를 사용하므로 사용자 정의 스크립트보다 먼저로드되어야하기 때문입니다.
참고 : 본문 태그 하단에 Scipts 를 포함하는 것이 좋습니다 .
또한 JQuery UI 전에 JQuery를 포함해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다