Question

我想隐藏一个特定的面板。例如，当我选择“下一步”时，面板2会跳过。导致只看到面板1，面板3，面板4.是否有我可以使用的代码使面板无效？我尝试过的一种方法是删除活动类。 $（：nth-child（2））。removeClass（'active'）; 结果不起作用。有没有其他人知道如何跳过面板2？下面我将代码附加到效果上。如果投票失败，请解释原因，这样我在使用讨论板时可以改进。谢谢。

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	
                    .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

<!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">
	<div id="panels">
    	<div class="sets"> <h1>PANEL 1</h1>
			<div><input type="text" name="ss1" value=""/></div>
       <div class="asciiCode"></div>
        </div>
        
        <div class="sets two"> <h1>PANEL 2</h1>
			<div><input name="ss2" value=""/></div>
       <div class="asciiCode"></div>
        </div>
        
        <div class="sets"> <h1>PANEL 3</h1>
			<div><input name="ss3" value=""/></div>
       <div class="asciiCode"></div>
        </div>
        
        <div class="sets"> <h1>PANEL 4</h1>
			<div><input name="ss4" value=""/></div>
       <div class="asciiCode"></div>
        </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>

Answer 1

最好添加类而不是删除它们。

找到要进行隐藏的css，将它放在一个类中，然后在你尝试删除的jQuery中添加，改为添加。

如何使用jQuery跳过特定面板？

1 个答案: