資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 建立前後按鈕，並在結束位置使其不可用？
使用 JavaScript 建立前後按鈕並在結束位置使其不可用有很多方法。我們將介紹兩種實現此功能的方法——一種使用普通的 if 條件，另一種使用“disabled”屬性。第二種方法利用“disabled”屬性使按鈕不可點選，並更新按鈕樣式以表示結束位置的不可用狀態。透過實現這些技術，我們可以輕鬆地在元素集中導航，使使用者體驗更加流暢和直觀。
讓我們看看在 JavaScript 中建立此類按鈕的兩種方法的示例。
僅使用 if 條件
我們將建立兩個按鈕，“prev”和“next”，併為其新增點選事件監聽器，並使用變數跟蹤當前位置。在點選按鈕時，它會更新當前位置並呼叫一個函式來更新 UI。此方法將透過使用 if 條件使按鈕處於可用或不可用狀態。
語法
使用者可以按照以下語法建立在結束位置不可用的前後按鈕。
// for prev button
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
// for next button
if (currentPosition < maxPosition) {
currentPosition++;
updateContent();
}
function updateContent() {
// update UI or make API call here
}
我們透過應用簡單的 if 條件使前後按鈕在結束位置不可用。
方法
在這種方法中，我們按照以下步驟操作：
步驟 1 - 建立一個 HTML 頁面，其中包含兩個按鈕，“prev”和“next”，以及一個帶有 id 為“content”的空 div。
步驟 2 - 定義一個 currentPosition 變數並將其設定為 0。
步驟 3 - 定義一個 maxPosition 變數並將其設定為元素的最大數量。
步驟 4 - 為“prev”按鈕新增點選事件監聽器。
步驟 4.1 - 在“prev”按鈕的點選事件監聽器中，檢查 currentPosition 是否大於 0。如果是，則將 currentPosition 減 1 並呼叫 updateContent() 函式。
步驟 5 - 為“next”按鈕新增點選事件監聽器。
步驟 5.1 - 在“next”按鈕的點選事件監聽器中，檢查 currentPosition 是否小於 maxPosition。如果是，則將 currentPosition 加 1 並呼叫 updateContent() 函式。
步驟 6 - 建立一個 updateContent() 函式來更新 UI 或進行 API 呼叫。
步驟 6.1 - 在 updateContent() 函式中，使用 currentPosition 值更新“content”div 的 innerHTML。
示例
在下面的示例中，我們建立了兩個按鈕，“prev”和“next”，併為其添加了點選事件監聽器；我們將執行相應的操作，並在使用者點選任何按鈕後根據 currentPosition 值的變化更新 UI。
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" ></div>
<button id = "prev" > Previous </button>
<button id = "next" > Next </button>
<script>
var currentPosition = 0;
var maxPosition = 10;
updateContent();
document.getElementById("prev").addEventListener("click", function() {
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
});
document.getElementById("next").addEventListener("click", function() {
if (currentPosition < maxPosition) {
currentPosition++;
updateContent() ;
}
});
function updateContent(){
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Position: " + currentPosition + "<br> <br>" ;
}
</script>
</body>
</html>
使用者可以在我們的線上 JavaScript 編輯器上檢視輸出，以瞭解這些按鈕是如何工作的。
使用 disabled 屬性
我們可以使用“disabled”屬性做同樣的事情。它用於使按鈕失效或不可點選。使用“disabled”屬性，我們將在按鈕處於結束位置時停用它們。在這裡，我們將更新按鈕樣式以表示結束位置的不可用狀態。
語法
使用者可以按照以下語法建立在結束位置不可用的前後按鈕，並使用 disabled 屬性。
// To disable the prev button
document.getElementById("prevBtn").disabled = true;
// To disable next button
document.getElementById("nextBtn").disabled = true;
將 disabled 屬性設定為 true 會使按鈕不可點選。我們將在結束位置為前後按鈕設定 true 值，以使其不可點選。
示例
在下面的示例中，“disabled”用於“prevBtn”和“nextBtn”按鈕，以防止使用者在分別到達列表的開頭或結尾時點選它們。當點選“prevBtn”並且當前位置位於列表的開頭時，按鈕上的 disabled 屬性將設定為 true，使其不可點選。類似地，當點選“nextBtn”並且當前位置位於列表的結尾時，按鈕上的 disabled 屬性將設定為 true，使其不可點選。這是為了防止使用者超出列表的第一個和最後一個元素。
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" > </div>
<button id="prevBtn" disabled > Previous </button>
<button id = "nextBtn" >Next </button>
<script>
let maxItem = 10;
let currentItem = 0;
prevBtn.style.backgroundColor = "red";
updateContent();
document.getElementById("prevBtn").addEventListener("click", function() {
if(currentItem > 0) {
currentItem--;
document.getElementById("nextBtn").disabled = false;
nextBtn.style.backgroundColor = "";
}
if(currentItem === 0) {
this.disabled = true;
prevBtn.style.backgroundColor = "red";
}
updateContent() ;
});
document.getElementById("nextBtn").addEventListener("click", function() {
if(currentItem < maxItem) {
currentItem++;
document.getElementById("prevBtn").disabled = false;
prevBtn.style.backgroundColor = "";
}
if(currentItem === maxItem) {
this.disabled = true;
nextBtn.style.backgroundColor = "red";
}
updateContent() ;
});
function updateContent() {
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Item: " + currentItem + "<br><br>";
}
</script>
</body>
</html>
使用者可以在我們的線上 JavaScript 編輯器上檢視輸出，以瞭解這些按鈕的顏色是如何根據其位置變化的。
我們學習了兩種使用 JavaScript 建立前後按鈕的不同方法。第一種方法涉及使用簡單的 if 條件。相反，第二種方法利用“disabled”屬性使按鈕不可點選，並更新按鈕樣式以表示結束位置的不可用狀態。
6K+ 次檢視
