CSS选择器无法使用jQuery
[英]CSS selector is not working using jQuery
问题描述
instructions for the project is to create a simple web page application that allows the user to enter one or more stock ticker symbols and display price information about these stocks. 
该项目的说明是创建一个简单的网页应用程序，该应用程序允许用户输入一个或多个股票代号，并显示有关这些股票的价格信息。 • Data has to come from a REST API ( https://www.alphavantage.co ), it is free to use and returns JSON formatted output. •数据必须来自REST API（ https://www.alphavantage.co ），可以免费使用并返回JSON格式的输出。
Here is my code so far and I'm not being able to figure it out 到目前为止，这是我的代码，我无法弄清楚
UPDATED when a user types a symbol, it's not showing anything on the console. 用户键入符号时更新，它在控制台上不显示任何内容。 how can I make it that for every symbol a user inputs , it fetches the price from the url and gives price. 如何使用户输入的每个符号都能从网址中获取价格并给出价格。
$(document).ready(function() { $('#searchstock').on('click', function() { let requestData = $('search').val(); let resultElement = $('stock'); // Make request to rest API $.ajax({ url: 'https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=' + requestData + '&apikey=SB1CZMKQ6Q5283QZ', method: 'get', data: { symbols: requestData }, dataType: 'json', success: function(data) { console.log(data); resultElement.html('price:' + data.Stock_Quotes[0]) } }); }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Stocks</title> <!-- Bootstrap core CSS --> <link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="searchContainer"> <h1>Enter symbol</h1> <p class="lead">Enter aa symbol to fetch a price </p> <input type="text" id="search" class="form-control" placeholder="Stock symbol..."> </div> <br> <button type="button" id="searchstock" class="btn btn-info">Get price</button> <br> <div id="stock"></div> </div> <!-- /.container --> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- script src="js/main.js"></script --> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2018-03-03 22:36:14
You expected this line to match the input having its id attribute set to "search": 您希望此行与ID属性设置为“搜索”的输入匹配：
let requestData = $('search').val();
jQuery select function requires a CSS selector as its first argument. jQuery select函数需要一个CSS选择器作为第一个参数。 Now in your code, the CSS selector you give to $ function is 'search' and this actually means «Please match elements having their name being "search"» and not «Match elements having their id attribute set to "search"» . 现在在您的代码中，您赋予$函数的CSS选择器是'search' ，实际上意味着«请匹配名称为“ search”的 元素，而不是«匹配id属性为“ search”的元素» 。
Do you see the difference ? 你看得到差别吗 ？
Simply change $('search').val(); 只需更改$('search').val(); to $('#search').val(); 到$('#search').val(); as # tells to match the "id" attribute. #要匹配“ id”属性。
The same goes for this line. 这条线也一样。
let resultElement = $('stock');
You also have a property name issue . 您还有一个属性名称问题 。
Querying for "MSFT" will return something like: 查询“ MSFT”将返回类似：
{
// …
"Stock Quotes": [
{
"1. symbol": "MSFT",
"2. price": "93.0300",
"3. volume": "--",
"4. timestamp": "2018-03-02 15:59:59"
}
]
}
As you can see, the data object property is called "Stock Quotes" and not Stock_Quotes as you put it in your code. 如您所见，数据对象属性在代码中称为“股票报价”，而不是Stock_Quotes 。
As the property name contains space, square brackets notation is required to access this entry. 由于属性名称包含空格，因此必须使用方括号符号才能访问此条目。 Retrieving the price for the first result will look like this: 检索第一个结果的价格将如下所示：
resultElement.html('price:' + data["Stock Quotes"][0]["2. price"])
解决方案2
-1 2018-03-04 00:52:53
Try making use of oninput instead of onclick if you want to execute search/ajax-call whenever a user types a symbol. 如果要在用户键入符号时执行搜索/ ajax调用，请尝试使用oninput代替onclick。
$('#search').on('input', function(e) { var resultElement = $('#stock'), requestData = $(this).val(); // Make request to rest API $.ajax({ url: 'https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=' + requestData + '&apikey=SB1CZMKQ6Q5283QZ', method: 'get', data: { symbols: requestData }, dataType: 'json', success: function(data) { console.log(data); resultElement.html('price:' + data["Stock Quotes"][0]["2. price"]) } }); });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.