0
私は援助が必要なコードを持っています。基本的には、スライド4枚のパネルがあります。コード$( "。two")を使って2番目のスライドを隠す。detach();.私が達成しようとしている目標は、スライド1のチェックボックスをチェックすると、「次へ」を選択すると2番目のスライドが表示されるはずです(基本的に2番目のスライドをスキップしません)。それ以外の場合は2番目のスライドがスキップしますスライド1のチェックボックスを選択すると、スライド2を表示させるにはどうすればよいですか?隠しスライドを表示するにはどうすればよいですか?
append()を使用して2番目のスライドでチェックボックスを対象にしようとしましたが、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 \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
/*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>
ありがとうございました。しかし、チェックボックスをチェックすると、パネル2にスキップされます。私の目標は、デフォルトでパネル2をスキップ(パネル2でdetatch()を使用)でした。チェックボックスをチェックすると、detatch()が削除され、パネル2が表示されます。私はdetatch()がそれをターゲットにしている間に、パネル2を表示しようとすると非常に多くの選択肢を試しました。別の選択肢がある場合は、私に知らせてください。ありがとう! – ricky
@ricky要件ごとに回答を更新しました。一見してお知らせします。 – Shiladitya
これは良いことです。しかし、私が掲示した例に基づいて、私の現在のコードにあなたのサンプルコードの一部を使用することはできますか?投稿したコードの一部を追加しようとしましたが、処理されませんでした。私はJavaScriptの例全体を使用しなければならないと思います。私は私の不便をお詫びします。ありがとう – ricky