我想在我的一個 JS 類正在運行并從后端接收回應時在我的 HTML 中制作按鈕。我正在使用 jQuery 和 vanilla JS，并在下面創建了一個示例。在此示例中，我想動態禁用未單擊的按鈕，以向用戶顯示正在發生的事情，并且在回傳回應之前他們不應單擊其他位置。
Array.from(document.getElementsByClassName("upload-button")).forEach(button => {
button.addEventListener("click",
function(){
let buttonSpinner = this.getElementsByTagName("span")[0];
buttonSpinner.classList.remove("d-none");
// here I would like to disable the button that wasn't selected
let destination = this.value;
uploadData(destination, buttonSpinner);
}
)
})
function uploadData(destination, buttonSpinner){
let link = "https://www.google.com/";
let description = "Stack Overflow";
new Upload(link, description, destination, buttonSpinner)
}
class Upload {
constructor(link=null, description=null, destination="submit", buttonSpinner=null){
this.link = link;
this.description = description;
this.destination = destination;
this.buttonSpinner = buttonSpinner;
this.log();
this.disableButtonSpinner();
}
log(){
console.log(this.link)
}
wait(){
return new Promise(resolve => setTimeout(resolve, 3000)); // wait for data to return from backend
}
async disableButtonSpinner(){
await this.wait() // simulate backend returning data
this.buttonSpinner.classList.add("d-none");
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
<button class="btn btn-primary upload-button" id="upload-user-data-button" value="data">
Upload & View My Data
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary upload-button" id="upload-submit-button" value="submit">
Upload & Submit
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>uj5u.com熱心網友回復：
您可以在函式中添加一個引數來訪問我使用的點擊事件 e。然后您可以遍歷您的按鈕并禁用除事件目標之外的其他內容。這是通過Array.from(document.getElementsByClassName("upload-button")).forEach(insideButton => { if(e.target !== insideButton) insideButton.disabled = true});
Array.from(document.getElementsByClassName("upload-button")).forEach(button => {
button.addEventListener("click",
function(e){
let buttonSpinner = this.getElementsByTagName("span")[0];
buttonSpinner.classList.remove("d-none");
// here I would like to disable the button that wasn't selected
Array.from(document.getElementsByClassName("upload-button")).forEach(insideButton => {
if(e.target !== insideButton)
insideButton.disabled = true});
let destination = this.value;
uploadData(destination, buttonSpinner);
}
)
})
function uploadData(destination, buttonSpinner){
let link = "https://www.google.com/";
let description = "Stack Overflow";
new Upload(link, description, destination, buttonSpinner)
}
class Upload {
constructor(link=null, description=null, destination="submit", buttonSpinner=null){
this.link = link;
this.description = description;
this.destination = destination;
this.buttonSpinner = buttonSpinner;
this.log();
this.disableButtonSpinner();
}
log(){
console.log(this.link)
}
wait(){
return new Promise(resolve => setTimeout(resolve, 3000)); // wait for data to return from backend
}
async disableButtonSpinner(){
await this.wait() // simulate backend returning data
this.buttonSpinner.classList.add("d-none");
}
} <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
<button class="btn btn-primary upload-button" id="upload-user-data-button" value="data">
Upload & View My Data
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary upload-button" id="upload-submit-button" value="submit">
Upload & Submit
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>uj5u.com熱心網友回復：
作為一個快速的黑客，你可以做這樣的事情：
Array.from(document.getElementsByClassName("upload-button")).forEach((button, i) => {
button.addEventListener("click",
function(){
let buttonSpinner = this.getElementsByTagName("span")[0];
buttonSpinner.classList.remove("d-none");
// here I would like to disable the button that wasn't selected
let buttons = Array.from(document.getElementsByClassName("upload-button"))
if(i==0) buttons[1].disabled=true;
if(i==1) buttons[0].disabled=true;
let destination = this.value;
uploadData(destination, buttonSpinner);
}
)
})
function uploadData(destination, buttonSpinner){
let link = "https://www.google.com/";
let description = "Stack Overflow";
new Upload(link, description, destination, buttonSpinner)
}
class Upload {
constructor(link=null, description=null, destination="submit", buttonSpinner=null){
this.link = link;
this.description = description;
this.destination = destination;
this.buttonSpinner = buttonSpinner;
this.log();
this.disableButtonSpinner();
}
log(){
console.log(this.link)
}
wait(){
return new Promise(resolve => setTimeout(resolve, 3000)); // wait for data to return from backend
}
async disableButtonSpinner(){
await this.wait() // simulate backend returning data
this.buttonSpinner.classList.add("d-none");
let buttons = Array.from(document.getElementsByClassName("upload-button"))
buttons[0].disabled=false;
buttons[1].disabled=false;
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
<button class="btn btn-primary upload-button" id="upload-user-data-button" value="data">
Upload & View My Data
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary upload-button" id="upload-submit-button" value="submit">
Upload & Submit
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>uj5u.com熱心網友回復：
添加此解決方案以解決 @Raven 解決方案的問題，即即使在操作完成后按鈕仍處于禁用狀態。
Array.from(document.getElementsByClassName("upload-button")).forEach(button => {
button.addEventListener("click",
async function(e){
let buttonSpinner = this.getElementsByTagName("span")[0];
buttonSpinner.classList.remove("d-none");
// here I would like to disable the button that wasn't selected
Array.from(document.getElementsByClassName("upload-button")).forEach(insideButton => {
if(e.target !== insideButton)
insideButton.disabled = true}
);
let destination = this.value;
await uploadData(destination, buttonSpinner);
}
)
})
async function uploadData(destination, buttonSpinner){
let link = "https://www.google.com/";
let description = "Stack Overflow";
await new Upload(link, description, destination, buttonSpinner)
}
class Upload {
constructor(link=null, description=null, destination="submit", buttonSpinner=null){
this.link = link;
this.description = description;
this.destination = destination;
this.buttonSpinner = buttonSpinner;
this.log();
this.disableButtonSpinner();
}
log(){
console.log(this.link)
}
wait(){
return new Promise(resolve => setTimeout(resolve, 3000)); // wait for data to return from backend
}
async disableButtonSpinner(){
await this.wait().then(()=>{
Array.from(document.getElementsByClassName("upload-button")).forEach(insideButton => {
insideButton.disabled = false;
}
);
}) // simulate backend returning data
this.buttonSpinner.classList.add("d-none");
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div>
<button class="btn btn-primary upload-button" id="upload-user-data-button" value="data">
Upload & View My Data
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary upload-button" id="upload-submit-button" value="submit">
Upload & Submit
<span class="ms-2 spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/428132.html
標籤：javascript html jQuery 引导程序 5
下一篇：使用Appbar組件在“react”中找不到材料ui匯出“useInsertionEffect”（匯入為“useInsertionEffect$1”）