Question

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

我的代码开始变得非常冗长和混乱。

所以我一直在寻找一种更清洁/更好的方法来管理任何时候需要看到的东西。

我想避免安装像angular / react / knockout这样的东西 - 因为在一个大型（ish）网站上只有1页似乎有很多开销。所以理想情况下只是赤裸裸的javascript或jquery。

但我也想避免javascript的页面和页面充满$（＆＃39; div1＆＃39;）。show（）; $（＆＃39; DIV2＆＃39;）。隐藏（）;
等
而且管理它们变得越来越困难。

我已经创造了一个小提琴，所以希望你能看到我想要完成的事情（它只有大约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内容？

沿着这些方向的东西，例如：

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

在javascript中绑定大量对象可见性。管理当前状态

1 个答案: