0
特定のパネルを非表示にしたい。たとえば、「次へ」を選択すると、パネル2はスキップします。パネル1、パネル3、パネル4のみが表示されます。パネルを非アクティブにするためのコードはありますか？私が試みた1つの方法は、アクティブなクラスを削除することでした。 $（：nth-child（2））。removeClass（ 'アクティブ'）;結果は機能しませんでした。他の誰かが私がどのようにパネル2をスキップできるか知っていますか？以下では、コードをエフェクトに添付しました。投票した場合は、理由を説明して、ディスカッションボードを利用する際に改善できる方法を説明してください。ありがとうございました。jQueryを使用して特定のパネルをスキップするにはどうすればよいですか？
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
$(':nth-child(3)').removeClass("active").css('display', 'none');
//doesnt affect
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 \t
.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 \t \t \t
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler<!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">
</head>
<body>
<div id="container">
\t <div id="panels">
\t <div class="sets"> <h1>PANEL 1</h1>
\t \t \t <div><input type="text" name="ss1" value=""/></div>
<div class="asciiCode"></div>
</div>
<div class="sets two"> <h1>PANEL 2</h1>
\t \t \t <div><input name="ss2" value=""/></div>
<div class="asciiCode"></div>
</div>
<div class="sets"> <h1>PANEL 3</h1>
\t \t \t <div><input name="ss3" value=""/></div>
<div class="asciiCode"></div>
</div>
<div class="sets"> <h1>PANEL 4</h1>
\t \t \t <div><input name="ss4" value=""/></div>
<div class="asciiCode"></div>
</div>
</div>
</div>
<div id="panelcontrol">
\t <button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>
</html>