我有一个我需要帮助的代码。基本上，我有一个带4个幻灯片的面板。我使用代码$（"两个"）隐藏第二幻灯片。我要实现的目标是：当我选中幻灯片1中的复选框时，选择" Next"时，第二幻灯片应显示（基本上不是跳过第二幻灯片）。否则第二幻灯片跳过。在Slide One选择复选框时，如何使Slide 2出现？
我尝试使用Append（）使用第二幻灯片将复选框定位，但是2个幻灯片面板仍然隐藏。（如果我放下大拇指，请解释为什么我可以在将来的论坛上进行改进。）谢谢您的时间！
！
$(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>在这里您可以使用解决方案
$(document).ready(function() {
var skipPanel2 = true;
function enableDisablePrevNex(){
if($('.active').index() === 0){
$('.btnPrev').prop('disabled', 'disabled');
$('.btnNext').removeAttr('disabled');
if($('input[name="vehicle"]').is(':checked')){
skipPanel2 = false;
} else {
skipPanel2 = true;
}
} else if($('.active').index() === 3){
$('.btnNext').prop('disabled', 'disabled');
$('.btnPrev').removeAttr('disabled');
} else {
$('.btnPrev, .btnNext').removeAttr('disabled');
}
}
//Initial Call
enableDisablePrevNex();
$('input[name="vehicle"]').change(function(){
if($(this).is(':checked'))
skipPanel2 = false;
});
$('.btnNext').click(function(){
slideNext();
});
$('.btnPrev').click(function(){
var activeSet = $('.active').index();
$('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
$('.sets:nth-child(' + activeSet + ')').addClass('active');
enableDisablePrevNex();
});
function slideNext(){
var activeSet = $('.active').index();
if(activeSet === 0){
if(skipPanel2){
$('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
$('.sets:nth-child(' + (activeSet + 3) + ')').addClass('active');
} else {
$('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
$('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active');
}
} else {
$('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active');
$('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active');
}
enableDisablePrevNex();
}
});.sets {
display: none;
}
.active {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="panels">
<div class="sets active">
<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">
<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>我无法执行您的代码，所以我尝试了自己的代码。
希望这对您有帮助。