使用swatch / HTML 5显示/隐藏HTML -动态HTML

Question

我在模板中实现了一个样本CSS。

<div data-option-index="0" class="swatch color clearfix">

    <div class="swatch-element  available" data-value="ONE">
        <input type="radio" checked="checked" value="ONE" name="CheckPurity" id="swatch-1-ONE">
        <label for="swatch-1-ONE">ONE <img alt="" src="./assets/images/soldout.png" class="crossed-out"></label>
    </div>

     <div class="swatch-element  available" data-value="TWO">
            <input type="radio" checked="checked" value="TWO" name="CheckPurity" id="swatch-1-TWO">
                <label for="swatch-1-TWO">TWO <img alt="" src="./assets/images/soldout.png" class="crossed-out">
                </label>
         </div>
</div>

​

​

因此，当用户单击“1”按钮时，它会被选中，而“2”将被取消选择，反之亦然。

现在一切都很好。

但是现在我想在所选按钮的基础上显示/隐藏表，假设选择了一个，我希望显示Id = "TblSpec_ONE“的表，并隐藏所有其他表，反之亦然

。相同的HTML代码是：

<div class="description"> 
    <table id="TblSpec_ONE" class="MGC-TblDtl">
        <tbody>
         <tr>
           <td>VALUE of Button </td>
            <td>ONE</td>
         </tr>
         </tbody>
     </table>

<table id="TblSpec_TWO" class="MGC-TblDtl">
  <tbody>
    <tr>
     <td>VALUE of Button </td>
     <td>TWO</td>
    </tr>
  </tbody>
</table>

​

现在，我的问题是，如何管理与HTML ( Button的编号和相应的表)相同的内容是动态的。

所以请指导我如何实现同样的目标。

提前感谢

Answer 1

您可以扩展您已经拥有的用于样本的代码，并添加一些逻辑来控制应该显示什么table。它应该很容易，因为两者都有相同的class和不同的id，可以用来将其链接到活动按钮。这些步骤将是：

1. 隐藏具有类MGC-TblDtl的所有表。 $(“table.mgc-tl”).hide()；
2. 获取样本的活动状态的data-value，并只显示具有id "TblSpec_" + data-value的表。请注意，根据如何实现处理样本的函数，此代码将有所不同，但它可能如下所示： $("TblSpec_“+ $(this).data("value")).show()；

Answer 2

谢谢，阿尔瓦罗·蒙托罗，在他的回答的基础上，这是代码的运行方式。供日后参考之用

<script>
    $(document).ready(function () {

        $("table.MGC-TblDtl").hide();

        $("table.MGC-TblDtl:last").show(); // show the last element as TWO is selected

        $(".swatch-element").click(function () {

            $("table.MGC-TblDtl").hide();
            $("#TblSpec_" + $(this).data("value")).show();
        });

    });
</script>