0
function displayImages(response) {
\t $('#roverImages').empty();
\t for(var i =0; i < 9; i++){
\t \t
\t var li = $('<li>');
\t
\t var image = $('<img src=' + response.photos[i].img_src + '>').addClass("image-popup");
\t li.append(image);
\t
\t $("#roverImages").append(li);
\t }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NASAPI</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- JUMBOTRON -->
<div id="header" class="jumbotron">
<div class="container">
<!-- <p><a href="https://en.wikipedia.org/wiki/Spirit_(rover)" target="_blank"><img src="assets/images/rover.png" class="rover"></a></p> -->
<!-- <p class="txtrover">MER-A Spirit Rover</p> -->
<h1 class="txtjumbo" id="txtTitle">NASAPI</h1>
<p class="txtjumbo">Welcome to our NASA API web app!</p>
<p>
<a id="button" href="#" class="btn btn-primary btn-lg">MER Rovers</a><button id="apodButton" class="btn btn-lg btn-primary">Astronomy picture Of The Day</button>
</p>
<p class="quote">「It’s a fixer-upper of a planet but we could make it work.」 - Elon Musk, CEO of SpaceX</p>
<p id="mp3_player">
<audio src="assets/music/interstellar.mp3" preload="auto" />
</p>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- MAIN -->
<div class="main" id="main-layout">
<div class="row">
<div id="roverRow" class="col-lg-3 col-md-3">
<h1 class="main-text">Choose a rover</h1>
<h4 class="main-text-sol">Sol</h4>
<div id="sol-date" class="main-text-sol-day">0</div>
<input id="sol-selector" type="range" value=1 max=1656 min=1 />
<p><img src="assets/images/curiosity.jpg" alt="Curiosity Rover" class="curiosityImage">
<button id="curiosity" class="btn btn-lg btn-primary btn-center">Curiosity Rover</button>
</p>
<p><img src="assets/images/Spirit.jpg" alt="Spirit Rover" class="spiritImage">
<button id="spirit" class="btn btn-lg btn-primary btn-center">Spirit Rover</button>
</p>
<p><img src="assets/images/Opportunity.jpg" alt="Opportunity Rover" class="opportunityImage">
<button id="opportunity" class="btn btn-lg btn-primary btn-center">Opportunity Rover</button>
</p>
</div>
<div id="getRoverImages" class="col-lg-9 col-md-9">
<h1 class="main-text">NASA API Documentation</h1>
\t <ul id="roverImages">
\t \t
\t </ul>
</div>
\t \t <!-- END MAIN -->
\t \t <!-- APOD SECTION -->
\t \t <div id="apod" class="apod">
\t \t \t <div class="container">
\t \t \t \t <h1 id="apod-text" class="apod-text">Astronomy Picture Of The Day</h1>
\t \t \t \t <p><div><input id="date" type="text" class="form-control" placeholder="YYYY-MM-DD"></div><button id="buttonSubmit" class="btn btn-lg btn-primary btn-block">Submit</button></p>
\t \t \t \t <div id="result"></div>
\t \t \t </div>
\t \t </div>
<script src="assets/music/audiojs/audio.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
</html>
很新的編碼&試圖使一個簡單的Web應用程序,使一個AJAX請求到美國宇航局的火星車API從每個火星圖片好奇心,精神和機遇。我的代碼似乎與硬編碼確切的日期。我的問題是,如何讓應用程序與我創建的切換器一起工作(僅使用http://www.cssportal.com/style-input-range/中的一個),以便用戶可以切換日期並選擇他們想要的哪一個,以便應用程序更具交互性。
function roverData(name) {
\t var sol = 200; //$("#sol");
\t $.ajax({
\t \t url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.toLowerCase() +'/photos?sol='+ sol +'&api_key=u8vY57tt0UKbMXetRwOIfrBM7CMDI2eSTurQAJ72',
\t \t method: "GET",
\t })
\t .done(function(response) {
\t \t console.log(response);
\t \t displayImages(response);
\t });
}
$("#curiosity").on("click", function() {
\t roverData("curiosity");
});
$("#spirit").on("click", function() {
\t roverData("spirit");
});
$("#opportunity").on("click", function() {
\t roverData("opportunity");
});
$("#sol-selector").on('change', function() {
\t $("#sol-date").text($(this).val())
})
function solDays(response) {
$("#sol-date").attr('max', res.photo_manifest.max_sol);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
是的,我剛剛加入它 –