使用后退按钮隐藏和显示下一个项目[关闭]

Question

我有这样的代码：

$('#next').click(function(){
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.next().addClass('active');
});

.question:not(.active){
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question active">Some question 1</div>
  <div class="question">Some question 2</div>
  <div class="question">Some question 3</div>
  <div class="question">Some question 4</div>
  <div class="question">Some question 5</div>
  <div class="question">Some question 6</div>
  <div class="question">Some question 7</div>
  <div class="question">Some question 8</div>
</div>
<button type="button" id="next">Next</button>

我希望我的代码有一个后退按钮 并且在（问题 8）处的下一个按钮消失，只剩下后退按钮。

谢谢。

Answer 1

$('#next').click(function() {
  var $current = $('.question.active');
  if ($($current).next(".question").length > 0) {
    $('.question').removeClass('active');
    $current.next().addClass('active');
    buttonCheck();
  }
});
$('#back').click(function() {
  var $current = $('.question.active');
  if ($($current).prev(".question").length > 0) {
    $('.question').removeClass('active');
    $current.prev().addClass('active');
    buttonCheck();
  }
});
buttonCheck();

function buttonCheck() {
  var $current = $('.question.active');
  if ($($current).next(".question").length == 0) {
    $('#next').hide();
    $('#back').show();
  } else if ($($current).prev(".question").length == 0) {
    
    $('#back').hide();
    $('#next').show();
  } else {
    $('#next').show();
    $('#back').show();
  }
}

.question:not(.active) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question active">Some question 1</div>
  <div class="question">Some question 2</div>
  <div class="question">Some question 3</div>
  <div class="question">Some question 4</div>
  <div class="question">Some question 5</div>
  <div class="question">Some question 6</div>
  <div class="question">Some question 7</div>
  <div class="question">Some question 8</div>
</div>
<button type="button" id="back">Back</button>
<button type="button" id="next">Next</button>

Answer 2

setButtonDisplay() 将在最后一个 div 具有 active 类时隐藏 Next 按钮，并在第一个 div 具有 active 类时隐藏 Back 按钮。

function setButtonDisplay(){
    var hidePrev = $('#questions div:first').hasClass('active'),
        hideNext = $('#questions div:last').hasClass('active');

    $('#back')[hidePrev ? 'hide' : 'show']();
    $('#next')[hideNext ? 'hide' : 'show']();
}
setButtonDisplay();

$('#next').click(function(){
    var $current = $('.question.active');
    if ($(".question").next().length != 0){
          $('.question').removeClass('active');
          $current.next().addClass('active');
     }
     setButtonDisplay();
});

$('#back').click(function(){
    var $current = $('.question.active');
     if ($(".question").prev().length != 0){
          $('.question').removeClass('active');
          $current.prev().addClass('active');
     }
     setButtonDisplay();
});

.question:not(.active){
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question active">Some question 1</div>
  <div class="question">Some question 2</div>
  <div class="question">Some question 3</div>
  <div class="question">Some question 4</div>
  <div class="question">Some question 5</div>
  <div class="question">Some question 6</div>
  <div class="question">Some question 7</div>
  <div class="question">Some question 8</div>
</div>
<button type="button" id="back">Back</button>
<button type="button" id="next">Next</button>

Answer 3

一个简单的方法是跟踪当前问题的索引。

您需要将一个计数器初始化为 1，然后每次单击下一个（或返回）按钮时递增（或递减）它。

就这样

var counter = 1

$('#next').click(function(){
    var counter = counter++;
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.next().addClass('active');
});

$('#back').click(function(){
    var counter = counter--;
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.prev().addClass('active');
});

同时，以这种方式编写一个.invisible 类：

.invisible {
    display: none;
}

最后，您可能需要在每次单击下一步/返回按钮时检查是否需要从按钮中添加或删除此类。

var counter = 1

$('#next').click(function(){
    var counter = counter++;
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.next().addClass('active');

    if (counter == 8) {
        $('#next').addClass('invisible');
    }

    if (counter == 2){
        $('#back').removeClass('invisible');
    }
});

$('#back').click(function(){
    var counter = counter--;
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.prev().addClass('active');

    if (counter == 1) {
        $("#back").addClass('invisible');
    }

    if (counter == 7) {
        $("#next").removeClass('invisible');
    }
});

希望对你有帮助！