【发布时间】：2018-03-07 02:43:33
【问题描述】：
我有一个需要帮助的代码。基本上，我有一个有 4 张幻灯片的面板。我使用代码 $(".two").detach(); 隐藏了第二张幻灯片。我想要实现的目标是：当我选中幻灯片 1 中的复选框时，选择“下一张”时应显示第二张幻灯片（基本上不会跳过第二张幻灯片）。否则第二张幻灯片会跳过。如何在第一张幻灯片中选择复选框时显示第二张幻灯片？
我尝试使用 append() 将复选框定位到第二张幻灯片，但第二张幻灯片面板仍然隐藏。 （如果我不满意，请解释原因，以便我以后可以在论坛上改进。）感谢您的宝贵时间！
$(document).ready(function() {
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
$(':nth-child(3)').removeClass("active").css('display', 'none');
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
$('#panelcontrol')
.on('click', 'button', function(e) {
e.preventDefault();
switch (true) {
case $(this).hasClass('btnNext'):
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
//enable Prev button
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', false);
//disabled Next button
if ($newFieldset.is(':last-child')) {
$panelControlButtons
.filter('.btnNext')
.prop('disabled', true);
}
break; // btnNext
var $input =
$('input')
.filter('.active')
.end();
case $(this).hasClass('btnPrev'):
var $newFieldset =
$fieldsets
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show(); //and show it
// enable Next button
$panelControlButtons
.filter('.btnNext')
.prop('disabled', false);
// disable Prev button
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler
/*skips panel two*/
$(".two").detach();
});<!doctype html>
<html lang="engl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="simplegrid.css">
<script src="jquery/main.js"></script>
<meta charset="utf-8">
<title>Stylus Simulator</title>
</head>
<body>
<div id="container">
<div id="panels">
<div class="sets">
<h1>PANEL 1</h1>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<div><input type="text" name="ss1" value="" /></div>
</div>
<div class="sets two">
<h1>PANEL 2</h1>
<div><input name="ss2" value="" /></div>
</div>
<div class="sets">
<h1>PANEL 3</h1>
</div>
<div class="sets">
<h1>PANEL 4</h1>
</div>
</div>
</div>
<div id="panelcontrol">
<button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>
</html>【问题讨论】：
标签： javascript jquery html panels