- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个多步骤(多页?)表单,只要用户按下“下一步”或“上一步”按钮,表单字段就会通过 div 显示和隐藏。
我只想禁用第一个 div (div id="page1"class="pageform") 上的“上一个”按钮,因为不需要它,反之亦然,最后一个 div (div) 上的“下一个”按钮id="page16"class="pageform")
我不太确定该怎么做,因为我是 JS 的新手,我使用了一个教程来帮助我了解如何使用 JQuery 显示和隐藏 div。
<!-- PAGE 1 -->
<div id="page1" class="pageform">
<div class="radio">
<label for="AmountNeeded" style="display: none;">How much do you need?</label>
<label><input type="radio" name="AmountNeeded" value="500" required>$100 - $500</label><br>
</div>
<div class="radio">
<label><input class="optradio" type="radio" name="AmountNeeded" value="1000" checked>$500 - $1000</label><br>
</div>
<div class="radio">
<label><input class="optradio" type="radio" name="AmountNeeded" value="2000">$1500 - $2000</label><br>
</div>
<div class="radio">
<label><input class="optradio" type="radio" name="AmountNeeded" value="2500">$2500 or more</label><br>
</div>
</div>
<!---PAGE 2 -->
<div id="page2" class="pageform">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="Firstname">First name</label><br>
<input name="Firstname" class="form-control" type="text" value="Bob" required />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="Lastname">Last name</label><br>
<input name="Lastname" class="form-control" type="text" value="" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="Email">Email Address</label><br>
<input name="Email" class="form-control" type="email" value="asdf@asdf.com" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="HomePhone">Home Phone</label><br>
<input type="tel" class="form-control" name="HomePhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 123-456-7890" required>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="CellPhone">Cell Phone </label><br>
<input type="tel" class="form-control" name="CellPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Format: 123-456-7890" required>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Phone">Work Phone</label><br>
<input type="tel" class="form-control" name="WorkPhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" value="111-222-3333" required>
</div>
</div>
</div>
</div>
.........
<button id="backbutton" class="btn btn-secondary" onclick="showPrev();"> Go back </button>
<button id="nextbutton" class="btn btn-primary" onclick="showNext();"> Next </button>
这是我通过 div 的函数:
var visibleDiv = 0;
function showDiv() {
$(".pageform").hide();
$(".pageform:eq(" + visibleDiv + ")").show();
}
showDiv();
function showNext() {
if (visibleDiv == $(".pageform").length - 1) {
//visibleDiv = 0;
} else {
visibleDiv++;
}
showDiv();
}
function showPrev() {
if (visibleDiv == 0) {
//visibleDiv = $(".mybox").length-1;
} else {
visibleDiv--;
}
showDiv();
}
我希望第一个 div 隐藏上一个按钮,最后一个 div 隐藏下一个按钮,而不是在每个 div 上显示按钮
最佳答案
当 visibleDiv 第一次隐藏 backbutton 否则显示它,当 visibleDiv 最后一次隐藏 nextbutton 否则显示它
function showDiv() {
$(".pageform").hide();
$(".pageform:eq(" + visibleDiv + ")").show();
if(visibleDiv == 1 ) { // 1 or first visible div number
$("#backbutton").hide();
} else {
$("#backbutton").show();
}
if(visibleDiv == 2 ) { // 2 or last visible div number
$("#nextbutton").hide();
} else {
$("#nextbutton").show();
}
}
关于javascript - 如何仅在第一页(div)隐藏 "previous"按钮并在最后一页(div)隐藏 "next button",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58347346/
用于获取所有季度中每个 ID 的 MAX 先前分数的最佳方法。 给定: ID QTR SCORE 21 1 3 21 2 5 21 3 3
我的应用程序包含照片,用户可以搜索符合特定条件的照片。假设某个用户通过标签搜索照片,我们得到如下信息: @results = Photo.tagged_with('mountain') 现在,@res
该表称为 imposto。 +------------------+------------+------+-----+---------+-------+ | Field |
我在这里不知所措。我觉得我已经尝试了所有的方法,并使用了其他帖子/教程中解释的确切方法。我知道您需要使用光标并设置第一个和最后一个可见文档,以便在向前移动的情况下从最后一个文档开始,在向后移动的情况下
Bootstrap容器横向有两种形式。将鼠标悬停在 Form1 上将增加宽度并减少 form2 的宽度。但逆转并没有发生。请提出任何建议。 Bootstrap Example
所以我刚读到我可以定位 previous sibling elements使用 :has(+ ) 伪类。 我去执行了以下规则。不幸的是,这是行不通的。我在祈祷什么吗? p { margin: 2r
我正在制作图像轮播 看我的 fiddle :https://jsfiddle.net/gd2n6paw/8/ 我是 jquery 新手,只是想知道我们如何制作轮播“下一个”和“上一个”控件,感谢您的帮
示例数据: library(dplyr) x % arrange(name,timestamp) 我想找到数据帧 anti_join(y,x) 中每个连续 block (使用 timestam
我尝试了hadoop-1.0.3以及1.0.4。两者都在伪集群模式下。 我的理解是,previous.checkpoint目录应该在由“fs.checkpoint.dir”指定的辅助名称节点下创建吗?
我有一个 MS SQL 表,其中包含具有以下列的股票数据:Id、Symbol、Date、Open、High、Low、Close。 我想自行加入该表,这样我就可以获得关闭的每日百分比变化。 我必须创建一
我正在使用 Selenium IDE 为我的网站编写测试,但我在让 selenium 使用 previous-sibling 单击按钮时遇到了问题 Arcade Reader 我
我有这个脚本: $('#ap').click(function() { $('#content-container').html($('#alertpay').html()); retu
这个问题已经有答案了: how to judge an element's previous or next element exist with jquery? (4 个回答) 已关闭 7 年前。
有没有办法改变浏览器中“上一个”按钮的位置? 问题如下: 用户进入页面 用户点击缩略图 大图像出现在弹出窗口(灯箱)和 URL 更改 来自 http://example.com/至 http://ex
我试图了解回调在这种情况下的工作原理。 例如给定这段代码: var images = jQuery.map((1234567 + '').split(''), function(n) { retu
我似乎无法按照我想要的方式滚动浏览我的 ResultSet : public void getCurves(String runId, File file, Connection conn) {
嗨,我正在使用 jquery mobile,这是代码 parisfrance generique code:24
使用 Apache Commons Collections,我找到了 OrderedMapIterator 接口(interface),可以在 OrderedMap 中来回导航。迭代到下一个条目按预期
我在mysql查询中使用这些代码 select c1.date,sum(SELECT IFNULL(cx.purchase-cx.sold,0))+MAX(p.openqty) as open
我正在尝试从数据库中获取上一张图像,其中图像按 ID 号列出。经过一番研究后,我遇到了这个查询,它应该提供之前的结果。然而它并没有这样做。相反,它提供小于当前 ID 号的第一个结果。 (代码格式为 P
我是一名优秀的程序员,十分优秀!