Question

`

function displayImages(response) {
	$('#roverImages').empty();
	  for(var i =0; i < 9; i++){
	  	
	    var li = $('<li>');
	    
	    var image = $('<img src=' + response.photos[i].img_src + '>').addClass( "image-popup" );
	    li.append(image);
	    
	    $("#roverImages").append(li);
	}
}

<!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>
                	<ul id="roverImages">
                		
                	</ul>
            </div>

		<!-- END MAIN -->

		<!-- APOD SECTION -->

		<div id="apod" class="apod">
			<div class="container">
				<h1 id="apod-text" class="apod-text">Astronomy Picture Of The Day</h1>
				<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>
				<div id="result"></div>
			</div>
		</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>

编码和编码非常新试图制作一个简单的网络应用程序，向美国宇航局的火星漫游者API发出AJAX请求，从每个火星上获取好奇号，精神和机会的图像。我的代码似乎与硬编码精确的sol日期一起工作。我的问题是如何让应用程序使用我创建的切换（只使用http://www.cssportal.com/style-input-range/中的一个），以便用户可以切换搜索日期并选择他们想要的那个，这样应用程序将更具交互性。

function roverData(name) {
	var sol = 200; //$("#sol");
	$.ajax({
		url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.toLowerCase() +'/photos?sol='+ sol +'&api_key=u8vY57tt0UKbMXetRwOIfrBM7CMDI2eSTurQAJ72',
		method: "GET",
	})
	.done(function(response) {
		console.log(response);
		displayImages(response);
	});



}

$("#curiosity").on("click", function() {
	roverData("curiosity");

});

$("#spirit").on("click", function() {
	roverData("spirit");
});

$("#opportunity").on("click", function() {
	roverData("opportunity");
});




$("#sol-selector").on('change', function() {
	$("#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>

Answer 1

您可以使用$('#sol').val()访问范围输入的视频。

＆＃13;

function roverData(name, sol) {
  console.log(name.toLowerCase(), sol);
  $.ajax({
      url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.toLowerCase() + '/photos?sol=' + sol + '&api_key=u8vY57tt0UKbMXetRwOIfrBM7CMDI2eSTurQAJ72',
      method: "GET",
    })
    .done(function(response) {
      console.log(response);
      displayImages(response);
    });
}

$("#show").on("click", function() {
  roverData($('#rover').val(), $('#sol').val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="sol" min="1" max="500" value="200">
<select id="rover">
  <option value="Curiosity">Curiosity</option>
  <option value="Spirit">Spirit</option>
  <option value="Opportunity">Opportunity</option>
</select>
<input id="show" value="Show" type="button" />

＆＃13;

火星漫游者图像AJAX请求

1 个答案: