我有一個格式如下的網頁：
<!doctype html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainstyle.css') }}">
<script>
setInterval(function ajaxCall1() {
$.ajax({
url: "/nfl_data",
type: "GET",
dataType: "json",
})
.done( function (response) {
var tableHTML = '';
tableHTML = '<tr><th colspan="1"> Game Date </th><th> Team 1</th><th colspan="2">Probability </th><th>Team 2 </th><th colspan="2">Score </th></tr>';
$.each(response, function (i, item) {
tableHTML = '<tr><td>' item.GameDate '</td><td>' item.Team1 '</td><td>' item.Team1Prob '</td><td>' item.Team2Prob '</td><td>' item.Team2 '</td><td id="team1-score">' item.Team1Score '</td><td id="team2-score">' item.Team2Score '</td></tr>';
});
$("#game-data").html(tableHTML);
});
}, 1000 * 1);
</script>
<div id="pageHead">
</div>
<div id="game-wrapper">
<table id="game-data">
</table>
</div>
<script>
$.when(ajaxCall1()).done(function(){
var t1score = document.getElementById('team1-score')
var t2score = document.getElementById('team2-score')
for (var i=0, len=t1score.length; i<len; i ){
if (parseInt(t1score[i].innerHTML)>parseInt(t2score[i].innerHTML)){
t1score[i].style.backgroundColor = "#e8630a";
}
else if (parseInt(t1score[i].innerHTML)<parseInt(t2score[i].innerHTML)){
t2score[i].style.backgroundColor = "#e8630a";
}
}
});
</script>
</body>
</html>
我對 JQuery 很陌生。
我想根據哪個值較大來有條件地格式化游戲分數單元格。
底部 JQuery 腳本旨在使用 id team1-score 和 team2-score 格式化表格資料。
但是，在頁面加載時，表是空的，直到 ajaxCall1 檢索到資料。運行此錯誤時出現錯誤，這是一個未捕獲的參考錯誤，未定義 ajaxCall1。
我假設它是因為 JQuery 在 setInterval 觸發之前沒有定義 ajaxCall1 函式。
我想要的輸出是 JQuery 突出顯示 td id team1-score 和 team2-score 基于哪個更大。
即如果 id team1-score 更大，它會被著色為：#e8630a
謝謝你。
uj5u.com熱心網友回復：
你從來沒有真正定義過ajaxCall1()，只是立即從間隔中呼叫它。這使它成為一個匿名函式，不能在其他任何地方使用。對于函式來說，這也是一個糟糕的名字，你應該根據它正在做什么來命名它，比如UpdateScores()
在這種情況下，我真的不明白你為什么要分開做這些事情？您可以將所有內容都放在一起，<script>而無需將所有內容回圈兩次。
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/mainstyle.css') }}">
<style>
.winner.team{
backgroundColor: '#e8630a';}
</style>
</head>
<body>
<div id="pageHead"></div>
<div id="game-wrapper">
<table id="game-data"></table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//let UpdateScores = function() {}; //this is a function expression
//function UpdateScores() {} //this is a function declaration (not inside of another function)
//these can be called from elsewhere in the code
setInterval(function UpdateScores() { //this is an anonymous function, it can not be called elsewhere
$.getJson('/nfl_data')
.error(function(error) {
//code to handle errors
})
.done(function (response) {
let tableHTML = `
<tr>
<th colspan="1">Game Date</th>
<th>Team 1</th>
<th colspan="2">Score</th>
<th colspan="2">Probability</th>
<th>Team 2</th>
<th colspan="2">Probability</th>
<th colspan="2">Score</th>
</tr>`;
$.each(response, function (i, item) {
tableHTML = `
<tr>
<td>${item.GameDate}</td>
<td>${item.Team1}</td>
<td>${item.Team1Prob}</td>
<td hljs-subst">${item.Team1Score > item.Team2Score ? ' winner': ''}">${item.Team1Score}</td>
<td>${item.Team2Prob}</td>
<td>${item.Team2}</td>
<td hljs-subst">${item.Team2Score > item.Team1Score ? ' winner': ''}">${item.Team2Score}</td>
</tr>`;
});
$('#game-data').html(tableHTML);
});
}, 1000);
</script>
</body>
</html>
腳注：
ids 只能使用一次。如果要識別事物的組，可以使用classes。類還允許您應用 css 規則，而不是單獨修改每個元素。每秒進行一次ajax呼叫會消耗大量資源。
我更喜歡放在
<script>. 的底部<body>，這樣腳本只在正文加載后運行，這樣可以防止其他一些挑戰。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335871.html
標籤：javascript html 查询 css 阿贾克斯