Question

我有一个div，里面有3个div，每个内部div都有一类内容，一个有一类current。我试图一次只显示一个.content，只是有一个隐藏div的下一个按钮，删除.current类并将其添加到下一个。一切正常，但是当我到达div的末尾时。我希望它只是回到第一个。以下代码不会这样做。第一个显示但是下一个按钮在此之后停止工作：

JS：

var $ = jQuery

$( document ).ready( function() {


  $('#next').click(function(){

  var item = $('.content.current');
  item.removeClass('current');
  item.slideUp();
  item.next().addClass('current');
  if(item.next().length == 0) {

    $('.content').first().slideDown().addClass('current').end();

  }
  })
})

HTML：

<div id="holder">
        <a class="btn btn-warning next" id="next">next</a>
        <div class="wrap">

        <div class="content current">

        <div id="header"><h3>Basic</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li>$4/month</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->

        <div class="content">

        <div id="header"><h3>Professional</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->

        <div class="content">

        <div id="header"><h3>St. Joseph</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->



        </div>
        <!-- .wrap -->

      </div>
      <!-- holder -->

Answer 1

您的$('.content').first().slideDown().addClass('current').end();做了什么，它会显示第一个元素，并为其添加current类。将您的脚本更改为此

var $ = jQuery
$( document ).ready( function() {
  $('#next').click(function(){
  var item = $('.content.current');
  item.removeClass('current');
  item.slideUp();
  item.next().addClass('current');
  if(item.next().length == 0) {
    $('.content').slideDown();
    $('.content').first().addClass('current');
  }
  });
});

它会起作用。这是一个例子fiddle。希望这会对你有所帮助。

Answer 2

@QAFTestStep(description="login using {user} and {password}")
public void login(String userName, String pwd) {
    //your code here
}

var $ = jQuery

$( document ).ready( function() {


    var i = 1;

    $('#next').click(function(){

        ++i;

        $('.content.current').removeClass("current").slideUp();
        $(".content:nth-child("+i+")").addClass("current").slideDown();

        if(i == 3) i=0;
    });
});

如果你坚持用JS做这件事很容易：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
        <a class="btn btn-warning next" id="next">next</a>
    <div class="wrap">

        <div class="content current">

        <div id="header"><h3>Basic</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li>$4/month</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->

        <div class="content">

        <div id="header"><h3>Professional</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->

        <div class="content">

        <div id="header"><h3>St. Joseph</h3></div>

        <ul>
          <li>Unlimited Bandwidth</li>
          <li>Unlimited Diskspace</li>
          <li>10 Email Accounts</li>          
          <li>24/7 Support!</li>
          <li><a class="btn btn-success">Order Now!</a></li>
        </ul>

        </div>
        <!-- .content -->

    </div>
        <!-- .wrap -->

</div>
      <!-- holder -->

但更好的选择是$( document ).ready( function() { var i = 1; $('#next').click(function(){ ++i; $('.content.current').removeClass("current").slideUp(); $(".content:nth-child("+i+")").addClass("current"); if(i == 3) i=0; }) })，我想你正在使用它。

你可以在这里找到它：Collapse Bootstrap

了解自定义jQuery滑块下一步按钮

2 个答案: