我正在嘗試從 JSON 文件中檢索引用及其作者，我遇到的問題是，一旦我單擊按鈕一次，事件就會被觸發(fā)，但只會觸發(fā)一次，此后不再觸發(fā)。同樣，當我調(diào)用 $(document).ready() 時，按鈕根本不會觸發(fā)。我知道這與我從 JSON 文件（是帶有文本、作者密鑰的對象數(shù)組）收集數(shù)據(jù)的方式有關，然后當我想要檢索具有正確的新報價時調(diào)用 fetch作者。// https://type.fit/api/quotes //// api link for quotes //const button = document.getElementById('new-quote');const baseUrl = 'https://type.fit/api/quotes';let randomNumber = Math.floor(Math.random() * 100);function getQuote() { fetch(baseUrl) fetch(baseUrl) .then(response => response.json()) .then(quote => $('#text-output').text(quote[randomNumber].text)) };function getAuthor() { fetch(baseUrl) .then(response => response.json()) .then(quote => $('#author').text(quote[randomNumber].author))};function renderQuoteToPage() { getQuote(); getAuthor();}$('#new-quote').click(renderQuoteToPage);$(document).ready(renderQuoteToPage);body { width: 100%; height: auto;}#outer-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="outer-wrapper" class="container-fluid"><div id="quote-box" class="card w-50"> <div class="card-body"> <div class="row"> <div class="col"> <div id="text"> <p id="text-output"></p> </div> </div> </div> <div class="row"> <div class="col"> <a href="#" id="tweet-quote">Tweet</a> </div> <div class="col"> <div id="author">Author</div> </div> </div> <div class="row"> <div class="col"> <button id="new-quote">New quote</button> </div> </div> </div></div> </div>
2 回答
尚方寶劍之說
TA貢獻1788條經(jīng)驗 獲得超4個贊
您在附加處理程序時調(diào)用這些函數(shù)，因此在沒有附加適當?shù)奶幚沓绦虻那闆r下調(diào)用它們，并且僅調(diào)用一次。
您只需要函數(shù)定義：
$('#new-quote').click(renderQuoteToPage);
...
$(document).ready(renderQuoteOnPageLoad);
編輯：您還需要randomNumber在每次getQuote()通話時進行設置
// https://type.fit/api/quotes //
// api link for quotes //
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber
function getQuote() {
randomNumber = Math.floor(Math.random() * 100);
fetch(baseUrl)
.then(response => response.json())
.then(quote => $('#text-output').text(quote[randomNumber].text))
};
function getAuthor() {
fetch(baseUrl)
.then(response => response.json())
.then(quote => $('#author').text(quote[randomNumber].author))
};
function renderQuoteToPage() {
getQuote();
getAuthor();
}
$('#new-quote').click(renderQuoteToPage);
$(document).ready(renderQuoteToPage);
body {
width: 100%;
height: auto;
}
#outer-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer-wrapper" class="container-fluid">
<div id="quote-box" class="card w-50">
<div class="card-body">
<div class="row">
<div class="col">
<div id="text">
<p id="text-output"></p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<a href="#" id="tweet-quote">Tweet</a>
</div>
<div class="col">
<div id="author">Author</div>
</div>
</div>
<div class="row">
<div class="col">
<button id="new-quote">New quote</button>
</div>
</div>
</div>
</div>
</div>
萬千封印
TA貢獻1891條經(jīng)驗 獲得超3個贊
您的腳本幾乎沒有變化，并且已經(jīng)完成。
<script>
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber;
function getQuote() {
fetch(baseUrl)
.then(response => response.json())
.then(quote => $('#text-output').text(quote[randomNumber].text))
};
function getAuthor() {
fetch(baseUrl)
.then(response => response.json())
.then(quote => $('#author').text(quote[randomNumber].author))
};
function renderQuoteOnPageLoad() {
randomNumber = Math.floor(Math.random() * 100);
getQuote();
getAuthor();
}
$(document).ready(function(){
renderQuoteOnPageLoad();
});
$(document).on("click","#new-quote",function(){
renderQuoteOnPageLoad()
})
</script>
- 2 回答
- 0 關注
- 212 瀏覽
添加回答
舉報
0/150
提交
取消