一般前提：
包含兩個影像的 HTML 頁面，ID 是 #me1 和 #me2
影像開始指向 1.jpg 和 2.jpg
如果單擊#me1，我們使用 jquery 向 PHP 腳本“randim.php”發出 GET 請求，該腳本回傳隨機選擇的檔案名；這個檔案名需要放在#me2的src=中
如果單擊#me2，則會發生同樣的事情，只是它替換了#me1 的 src=
需要注意的是，單擊每個影像會更改其他影像，而不是本身
在換出影像上的 src= 之前登錄到控制臺，然后在影像完成加載后再次登錄
代碼：
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var nextimg;
function start() {
console.log("First #me1 image is " $('#me1').attr("src"));
console.log("First #me2 image is " $('#me2').attr("src"));
}
function clickedme1() {
console.log("#me1 has been clicked, need to replace the image in #me2");
nextimg = $.ajax({
type: "GET",
url: "randim.php",
async: false
}).responseText;
console.log("Next image is for #me2 is " nextimg);
$('#me2').attr("src", nextimg);
$('#me2').on("load", function() {
console.log("Finished loading " nextimg " in #me2");
});
}
function clickedme2() {
console.log("#me2 has been clicked, need to replace the image in #me1");
nextimg = $.ajax({
type: "GET",
url: "randim.php",
async: false
}).responseText;
console.log("Next image is for #me1 is " nextimg);
$('#me1').attr("src", nextimg);
$('#me1').on("load", function() {
console.log("Finished loading " nextimg " in #me1");
});
}
</script>
<style>#me1, #me2 { width: 400px; height: 400px }</style>
</head>
<body>
<img id="me1" onClick="clickedme1()" src="images/1.jpg">
<img id="me2" onClick="clickedme2()" src="images/2.jpg">
<script>window.onload = start();</script>
</body>
</html>
它似乎作業得很好，除了控制臺日志記錄發生了一些事情。日志訊息被重復，我點擊的次數越多，日志訊息的重復次數就越多。
請注意表示重復日志訊息的藍色圓圈：
我已經驗證了 Chrome 和 Firefox 中都發生了重復的日志訊息
Web 服務器的日志顯示正常，我沒有看到對服務器的任何意外請求。每次單擊都會產生一個對 randim.php 的請求，然后是一個對影像的請求。
我在這里想念什么？
注意：PHP 腳本 (randim.php) 的內容并不重要，我知道它是可靠的，我已經在不同的環境中使用了幾個月，但為了完整起見，它是來自https 的腳本： //www.phpjunkyard.com/random-image.php。
其他可能無關緊要的事情：Web 服務器是 Ubuntu 20.04.4 LTS 上的 Apache/2.4.41
uj5u.com熱心網友回復：
每次單擊其中一個影像時，都會load使用以下代碼創建一個新的事件處理程式：
$('#me1').on("load", function() {
console.log("Finished loading " nextimg " in #me1");
});
因此，單擊 1 次后，您有一個事件處理程式發出訊息，單擊 2 次后，您有 2 個事件處理程式，單擊 3 次后...等等。
將該代碼從clickme函式中移出并移到主腳本代碼中，或者.one改為使用。
uj5u.com熱心網友回復：
"on"這是因為每次單擊影像時都會將事件處理程式系結到事件。您可以使用 jQuery .one()，它只會觸發一次。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/490989.html
標籤：javascript html jQuery 阿贾克斯 图片
下一篇：N皇后區和結果狀態