Question

我有一个创建7个div部分的页面，除了第一个之外我隐藏它们。每个div有4个问题。一旦他们回答了所有四个问题并单击下一个按钮，我想隐藏该div并显示下一个。在最后一个我将有提交按钮。我似乎无法弄明白。

我的最新尝试如下。

JQuery在这里调用

$(document).ready(function() {
    $('#1').show();
    $('#2').hide();
    $('#3').hide();
    $('#4').hide();
    $('#5').hide();
    $('#6').hide();
    $('#7').hide();

    $('.article').click(function() { 
        $(this).parent('div').hide();
        $(this).next('div').show();
        return false;
    }); 
});

此处前两个HTML div的示例包含大量内容，以节省空间：

<div name="1" id="1">
    <span class="chapter">Chapter 1</span>
    <p>1. According to this training etc?
        <br>                    
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="23"> 1.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="24"> 2.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="25"> 3.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="26"> 4.
        <br>
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

<div name="2" id="2" style="display: none;">
    <span class="chapter">Chapter  2</span>
    <p>5. question here
        <br>                    
        <input type="hidden" name="4" value="20">
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

Answer 1

试试这个：

// onlclick of next button
$('.next').click(function() { 
    $(this).parents('div').hide();
    $(this).parents('div').next('div').show();

    return false;
});    

// onlclick of prev button
$('.prev').click(function() { 
     $(this).parents('div').hide();
     $(this).parents('div').prev('div').show();

     return false;
});

嗯，但这可以假设您的first div没有上一页按钮且last div没有下一个按钮
以及你想要隐藏或显示的div是你的上一个/下一个按钮的第一个父div

或者您需要将(eg: question)课程提供给您要隐藏或显示的question divs，然后替换为上述代码中parents('div') parents('.question')。

Answer 2

向除第一个输入之外的所有输入添加一个类，并将display设置为none。

.vis {
    display: none;
}

将所有div包装在包装器div中并在点击调用中分配id容器

var next_id = parseint($(this).attr('id')) + 1;

$(this).closest('div').hide();
$(this).closest('.container').find('#' + next_id).show();

Answer 3

您可以将所有div存储在一个数组中并编写一个类似的函数：

var divArray = [];
for (var index = 1; index < 8; index++) {
   divArray[divArray.length] = $('#' + index);
}

function showDiv(showIndex) {
   for (var index = 0; index < divArray.length; index++) {
      if (index === showIndex) {
         $(divArray[index]).show();
      }
      else {
         $(divArray[index]).hide();
      }
   }
}

Answer 4

这是一个很好的解决方案。

我已经将show show-hide应用到你的所有div中，你想显示和隐藏。

因为在实际的事情中，如果你想通过div找到它意味着你不能在你的内容框中添加div。

最好添加这个类并使代码健壮。你可以在这里试试。

$(document).ready(function() {
  $('.show-hide').hide();
  $('#1').show();
  $('.article').click(function() {
    $('.show-hide').hide();
    $(this).closest('.show-hide').hide().next('.show-hide').show();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div name="1" id="1" class="show-hide">
  <span class="chapter">Chapter 1</span>
  <p>1. According to this training etc?
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="23">1.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="24">2.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="25">3.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="26">4.
    <br>
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="2" id="2" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="3" id="3" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  3</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="4" id="4" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="5" id="5" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="6" id="6" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  6</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="7" id="7" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  7</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="8" id="8" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  8</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

Answer 5

Here JSfiddle link is example

你只需要修改你的js

$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
$('#6').hide();
$('#7').hide();

$('.article').click(function(){ 
    $(this).parent('div').hide().next('div').show();
    return false;
});

JQuery隐藏当前div并显示下一个div

5 个答案: