Javascript 显示/隐藏div on复选框单击未知div数

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

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

我想使它自动化，这样无论我有多少个部分，它都能工作。非常感谢您的帮助。谢谢。

试试这个：

$('#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);
});

---

您需要将当前可见数据存储在变量中。然后显示下一个并隐藏当前的。这比再次找到可见的更有效。 您还可以存储下一个显示的部分，以便在结束时知道： $“接受”。单击“接受”功能{ var vis=$'。可见'； var hid=vis.next.hidden.removeClass.hidden.addClass.visible； $'accept'.prop'checked'，false； //如果我们还没有在结尾处显示某些内容，请隐藏当前可见的内容 ifhid.length>0{ vis.removeClass'visible'。addClass'hidden'； } }; .可见{ 显示：块； } .隐藏{ 显示：无； } 0 1. 2. 3.

---

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

$('#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);
    }
});

更新小提琴： 添加了要检查的if语句，如果您当前在最后一节中，请尝试以下操作-

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

---

使用基于复选框值的计数 这是一把工作小提琴，状态高达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>

---

所有div只有一个复选框？那么，当它被取消选中时会发生什么呢？是否有理由使用复选框而不是复选框？是的，只有一个复选框不知道为什么。这是有原因的，因为标签上写着“同意”？如果不检查会发生什么？每次重新检查都会发生什么？这将使下一个div可见，然后将它们全部隐藏。这不起作用，因为它使用行$'.visible'.removeClass'visible'.addClass'hidden'隐藏它们；当我到达最后一部分时，我希望允许用户选中相同的复选框，什么也不做。没有更新小提琴，但更新了代码段。只需添加if语句，就可以在最后一节停止。我将在一分钟内提供额外的代码片段…不幸的是，这不起作用，因为我的php生成的代码有可见和隐藏的类，而您的代码使用隐藏和显示。在第一节之后，它没有显示任何内容。然后调整！这真的很容易！花了我大约1分钟！我使用隐藏和显示，因为我的小提琴中没有包含任何css来定义.hidden和.visible类的显示样式！因此，如果您只是对这两个类使用toggleClass函数并删除hide和show，它应该可以工作！不要只是把小提琴链接作为代码发布——发布代码！

$('#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);
});

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