单击时显示隐藏 div 的依赖项

Question

我正在尝试编写一个"页面"，该页面向用户询问一个答案是/否的问题。如果他们回答"是"，将显示一个新的"页面"，如果他们回答"否"，将显示不同的"页面"。总共将有6个不同的"页面"。

我将加载div 中的所有"页面"并隐藏除第一个之外的所有页面。

我真的不确定从哪里开始使用 JS Code，我应该为每个页面单独编码显示/隐藏，还是我可以组合成一个案例 0：案例 1 类型函数？

.page { display:none; width:100%; }
#p1 {display: inline-block;}

<div id="lpage"> 
<section class="page" id="p1">
<h1>This is Page 1</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
<section class="page" id="p2">
<h1>This is Page 2</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
<section class="page" id="p3">
<h1>This is Page 3</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
<section class="page" id="p4">
<h1>This is Page4</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
<section class="page" id="p5">
<h1>This is Page 5</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
<section class="page" id="p6">
<h1>This is Page 6</h1>
<div class="yes">Yes</div>
<div class="no">No</div>
</section>
</div>

Answer 1

如果你使用 jquery（我推荐的），你可以为这个功能做一个简单的函数：

function showPage(id) {
$('section.page').hide();
$('#p'+id).show();
}
//show page 3
showPage(3);

Answer 2

使用 JQuery 尝试这样的事情：

$(".yes").click(function() {
  var parentSectionId = $(this).parent(".page").attr('id');
  if(parentSectionID == "p1") {
     $("#p2").hide();
     $("#p4").hide();
     $("#p3").show();
  }
  if(parentSectionID = "p2") {
     ...
  }

等等。 然后，您可以在单独的单击函数中处理"否"案例，只需将"是"替换为"否"。