Question

我有一个自动生成的部分列表，如下所示：

<div class="list">
    <section class="visible list-0"></section>
    <section class="hidden list-1"></section>
    <section class="hidden list-2"></section>
    <section class="hidden list-3"></section>
    <!-- unknown amount of sections -->
</div>

还有一个复选框：

<input type="checkbox" id="accept" value="1" required>

如果选中了复选框，我想要隐藏第一部分.list-0并显示下一部分list-1。然后，如果再次选中复选框，则隐藏list-0和list-1并显示list-2。请注意，未知部分的数量最多可达25个。

以下代码是我现在写的。

$('#accept').on('click',function() {
  var count_sections = $('.list > section').length;

  $('.list-0').removeClass('visible').addClass('hidden');
  $('.list-1').removeClass('hidden').addClass('visible');

  // this should uncheck the checkbox
  $('#accept').attr('checked', false);
});

我想自动化它，所以无论我有多少部分它都会工作。非常感谢任何帮助。感谢。

Answer 1

试试这个：

$('#accept').on('click',function() {
  $('.visible').next('.hidden').removeClass('hidden').addClass('visible');
  $('.visible:first').removeClass('visible').addClass('hidden');

  // this should uncheck the checkbox
  $('#accept').prop('checked', false);
});

Answer 2

这是我的第一个方法。选择可见元素，隐藏它，切换类可见，选择下一个元素，显示它并切换类可见。我完全从这个解决方案中删除了隐藏类，因为我们在两个状态之间切换 - 可见和隐藏 - 我们只需要可见类来知道它是可见的还是隐藏的......

$('#accept').on('click',function() {
    if (!$("section:last").hasClass("visible")) 
    {
        $('.visible').hide().toggleClass("visible").next()
          .show().toggleClass("visible");

        // this should uncheck the checkbox
        $('#accept').attr('checked', false);
    }
});

更新的好词：http://jsfiddle.net/tbu116w8/2/ 如果您目前在最后一节

，则添加要检查的if语句

Answer 3

您需要将当前可见的电流存储在变量中。然后显示下一个并隐藏当前的那个。这比再次找到可见的更有效。您还可以存储下一个显示的部分，以便知道何时到达终点：

    $('#accept').on('click',function() {
      var vis = $('.visible');
      var hid = vis.next('.hidden').removeClass('hidden').addClass('visible');
    
      $('#accept').prop('checked', false);

      // if we showed something (not at the end yet), hide the current visible one
      if(hid.length > 0) {
          vis.removeClass('visible').addClass('hidden');
      }
    });

.visible {
    display:block;
}

.hidden {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="list">
    <section class="visible list-0">0</section>
    <section class="hidden list-1">1</section>
    <section class="hidden list-2">2</section>
    <section class="hidden list-3">3</section>
    <!-- unknown amount of sections -->
</div>

<input type="checkbox" id="accept" value="1" required/>

Answer 4

试试这个 -

var $previousSection=$(".list-0").show();
$('#accept').on('change',function() {
    if($(this).is(":checked")){
        $previousSection.hide();
        $previousSection = $previousSection.next("section").show();    
    }  
});

DEMO

Answer 5

对复选框值使用count 这是一个工作小提琴，条件达到25

$('#accept').on('click',function() {
var count_sections = $('.list > section').length;
var count = $(this).val();
if(count > 25)
{
return false;
}
$('.list-'+count).removeClass('visible').addClass('hidden');
count++;  
$('.list-'+count).removeClass('hidden').addClass('visible');
$(this).val(count);
// this should uncheck the checkbox
$('#accept').attr('checked', false);
});

这是html

<div class="list">
<section class="visible list-0">1st</section>
<section class="hidden list-1">2nd</section>
<section class="hidden list-2">3rd</section>
<section class="hidden list-3">4th</section>
<!-- unknown amount of sections -->
</div>

工作示例

jsfiddle.net/dr8Ln350/

显示/隐藏div上的复选框单击具有未知数量的div

5 个答案:

DEMO