我的代碼正在顯示具有來自陣列的不同輸出的多個 div，但用于顯示的資訊僅顯示來自陣列 i 的所有輸出的第一個條目。
javascript-
$.ajax(settings).done(function (response) {
const box = `
<div class='box'>
<h4>Away Team</h4>
<div ></div><br>
<h4>Country</h4>
<div ></div><br>
<h4>Competition name</h4>
<div ></div><br>
<h4>Federation</h4>
<div ></div><br>
<h4>Home Team</h4>
<div ></div><br>
<h4>Has expired?</h4>
<div ></div><br>
</div>`;
console.dir(response);
console.dir(response.data[1]);
for (var i = 0; i < response.data.length; i ) { console.dir(response.data[i]); }
for (var i = 0; i < response.data.length; i ) {
$('body').append(box);
$(".away_team").text(response.data[i].away_team);
$(".competition_cluster").text(response.data[i].competition_cluster);
$(".competition_name").text(response.data[i].competition_name);
$(".federation").text(response.data[i].federation);
$(".home_team").text(response.data[i].home_team);
$(".is_expired").text(response.data[i].is_expired);
}
});
}
和 html-
<body>
<div class="page-header">
<h1>Football Predictions</h1>
</div>
<h2> More information soon </h2>
<button type="button" onClick="getgames()">Check info</button>
<script src="js/main.js"></script>
</body>
</html>
已編輯。這是完整的代碼，有人可以提供修復嗎？
重點是在頁面正文中顯示輸出到控制臺的陣列資訊，但實際上，代碼只是重復條目......
uj5u.com熱心網友回復：
作為box具有這些“away_team”、...等類的元素的容器元素，您需要確保您的 jQuery 選擇器在最新框的本地，否則您將繼續在所有框中選擇它們。在這種情況下，這些text設定器將僅應用于第一個框中的元素。
為了使其正常作業，您應該首先獲取對 box DOM 元素（或它的 jQuery 包裝器）的參考，然后將其作為$回圈中選擇器的第二個引數傳遞。所以，在回圈體中做：
var $box = $(box); // Create and get the DOM element
$('body').append($box);
// Smaller scoped selectors:
$(".away_team", $box).text(response.data[i].away_team);
$(".competition_cluster", $box).text(response.data[i].competition_cluster);
$(".competition_name", $box).text(response.data[i].competition_name);
$(".federation", $box).text(response.data[i].federation);
$(".home_team", $box).text(response.data[i].home_team);
$(".is_expired", $box).text(response.data[i].is_expired);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/512369.html
上一篇：從字典中的字典中獲取值