jquery - 使用色板/HTML 5 显示/隐藏 HTML - 动态 HTML

Question

我在我的模板中实现了一个 swatch 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>

因此，当用户单击按钮“ONE”时，它会被选中，而“TWO”会被取消选中，反之亦然

此时一切都很好。

但现在我想根据所选按钮显示/隐藏表格假设如果选择了一个，我想显示 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 相同的内容(按钮的数量和相应的表格)是动态的。

请指导我如何实现相同的目标。

提前致谢

Answer 1

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

1. 隐藏所有具有 MGC-TblDtl 类的表。

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

2. 获取样本事件状态的 data-value 并仅显示具有 id "TblSpec_"+ data-value 的表格。请注意，此代码将根据您如何实现处理样本的功能而有所不同，但它可能是这样的:

   $("TblSpec_" + $(this).data("value")).show();