数据结构
网络
关系数据库管理系统
操作系统
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+ 次查看
