獲取動態生成 id 的元素的 id

Question

我有一組通過 Handlebars 動態生成的元素，如下所示

         {{#floor as |room i|}}
            <div class="btn-group-toggle" data-toggle="buttons" >
              <label class="btn btn-secondary" id="{{id}}">
                <input type="checkbox" autocomplete="off"> {{name}}
              </label>
            </div>
         {{/floor}}

如您所見，元素是使用 id="{{id}}" 創建的。 但是當頁面完成加載時，我想隱藏這些元素，直到用戶單擊按鈕。 我發現很難獲得動態 ID

目前，我正在使用 JQuery 如下所示

    $(document).ready(function () {
        $('#{{id}}').hide();
    });

這適用於已知 id，但在我不知道 id 的情況下不適用

Answer 1

如果你想隱藏元素，你也可以 select 一個獨特的 class。

      {#floor as |room i|}}
        <div class="btn-group-toggle" data-toggle="buttons" >
          <label class="btn btn-secondary unique-class" id="{{id}}">
            <input type="checkbox" autocomplete="off"> {{name}}
          </label>
        </div>
     {{/floor}}

使用 JQuery：

    $(document).ready(function () {
    $('.unique-class').hide();
});