單擊幾秒鐘后，我嘗試更改按鈕文本。頁面上是由 PHP 資料庫 while 回圈動態構建的按鈕。每個按鈕都動態地獲得一個 id，如 button0、button1、button2 等......
echo "<a href='rdp://" . $record["ip_adress"] . "'><button id='button".$counter."' type='button' class='button' onclick=\"btn('button".$counter."')\" style='vertical-align:middle'"?>
<?php if($freeusers == 0){echo "disabled>No Login";}else{echo ">Login";}?> <?php echo "</button></a>";
這里是 Javascript 代碼：
<script>
function btn(i){
document.getElementById(i).addEventListener('click', function (clicked) {
return function () {
if (!clicked) {
var last = this.innerHTML;
this.innerHTML = 'please wait...';
clicked = true;
setTimeout(function () {
this.innerHTML = last;
clicked = false;
}.bind(this), 5000);
}
};
}(false), this);
}
</script>
Button 名稱在單擊后通過函式。但是程式在 if(!clicked){ 之后從未到達過......似乎它無法識別“點擊”或其他東西。但我不知道該怎么辦。
問候
uj5u.com熱心網友回復：
你可以嘗試這樣的事情。將事件偵聽器分配給超鏈接并this在事件處理程式中使用以查找button和修改它的屬性
document.querySelectorAll('a[href^="rdp:"]').forEach(a => {
bttn = a.firstElementChild;
bttn.dataset.alt = 'Please wait...';
bttn.dataset.value = bttn.innerHTML;
a.addEventListener('click', function(e) {
let bttn = this.firstElementChild
bttn.innerHTML = bttn.dataset.alt;
setTimeout(() => {
bttn.innerHTML = bttn.dataset.value;
}, 5000)
});
});<a href="rdp:192.168.0.4" target="_blank">
<button type="button" class="button">Login</button>
</a>
<a href="rdp:192.168.0.57" target="_blank">
<button type="button" class="button">Login</button>
</a>uj5u.com熱心網友回復：
這是您的作業解決方案
document.getElementById('i').addEventListener('click', function () {
var btnText = this.innerText;
this.innerText = 'Please Wait...';
setTimeout(function () {
document.getElementById('i').innerText = btnText;
}, 1000);
})
用 setTimeout 方法上的選擇器替換它
uj5u.com熱心網友回復：
我會采取不同的方法。例如，您可以為這些按鈕添加一個類 - 并簡單地回圈它們。然后，您可以通過添加事件偵聽器來為每個按鈕添加邏輯
const myButtons = document.querySelectorAll('.my-button')
for (let i=0; i <= myButtons.length; i ) {
myButtons[i].addEventListener('click', e => {
...
})
}
您可能還希望在腳本標記中包含 async 屬性。這樣您就可以確保 HTML 不會在腳本之后加載。
<script async ...>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395750.html
標籤：javascript php html css
下一篇：在復選框上顯示/隱藏內容