在JavaScript中绑定许多对象可见性.管理当前状态

Question

我正在编写一个网站，用户将点击按钮开始。
根据他们按下哪个按钮，将显示页面上的新部分。
本节中的更多按钮 - 击中其中一个按钮，将出现一些部分。

我的代码开始变得很长，凌乱。

所以我一直在寻找一种更清洁/更好的方式来管理任何需要可见的东西。

我想避免安装诸如Angular/React/Knockout之类的内容 - 因为在一个大型(ISH(网站上，它似乎只有1页的开销。因此，理想情况下只是裸javascript或jQuery。

但我也想避免使用$('div1'(的JavaScript的页面和页面。Show((;$('div2'(。hide((;
等

都很难管理它们。

我已经创建了一个小提琴，所以希望您能看到我要完成的工作(只有1/5大约完成但已经看上去很混乱(：https://jsfiddle.net/6w4mfndf/

，但基本上看起来像这样：

<div name="Group1">
  <input name="group1" type="radio" id="btn1" />
  <span>1</span>           
  <input name="group1" type="radio" id="btn2" />
  <span>2</span> 
<div>
<div name="group2">
<div id="div_btn1" style="display:none">
      <input name="group2" type="radio" id="btn1_1" />
      <span>1_1</span>
      <input name="group2" type="radio" id="btn1_2" />
      <span>1_1</span>
</div>
</div>
<script>
$(function () {
        $('#btn1').change(function() {
            if ($('#btn1').is(':checked')) {
                $('#div_btn1').show();
                $('#div_btn1_1').hide();
            }
        });
</script>

我正在与MVC合作，如果可以使用任何方式来帮助模拟数据。(我猜想不太可能，但只是把它扔出去(。

我缺少任何解决方案？

Answer 1

为什么不尝试拥有触发JS的所有按钮和一个数据属性的所有按钮共享的类，以告知JS的内容div of哪个内容？

例如：

<div class="content-block" id="content1">
Content 1
</div>
<div class="content-block" id="content2">
    Content 2
</div>
<button class="content-button" data-content-block="content1" value="content 1"></button>
<button class="content-button" data-content-block="content2" value="content 2"></button>
<script>
$(function () {
    $(".content-block").hide();
   $(".content-button").click(function() {
         $(".content-block").hide();
        var contentBlock = $(this).attr("data-content-block");
        $("#" + contentBlock).show();
   });
});
</script>