HTML - 列表中的列表 - 索引按鈕按下

Question

我試圖在 JavaScript 中識別來自列表中列表的按鈕按下。

在基本術語中，我認為它就像一個 2x2 表 - 例如，如果按下右上角的按鈕，它的索引應該是 0-1。 如果按下右下角，它的索引應該是 1-1。 如果按下左上角索引應為 0-0，左下角為 1-0 等。

子列表構成父列表的行，並由一系列預定義模板組成。 每個子列表的 ID 是使用父列表的索引 ID 生成的。

我想知道這方面的最佳實踐。 我正在使用 Crestron 的 ch5 庫，但希望我可以將通用原則應用於我的問題。

我已經簡化了 HTML：

<template id="template-0">
    <button id="post-1">Item 1</button>
</template>

<template id="template-1">
    <button id="post-2">Item 2</button>
</template>

<ch5-list 
    class="verticalList"   
    size="2"
    indexid="idy"
    id="parent-list"
    orientation="vertical">
    
    <template>
        
        <ch5-list 
            class="horizontalList"
            id="child-list{{idy}}"
            size="2"
            indexid="idx"
            orientation="horizontal">

            <template>
                <ch5-template templateid="template-{{idx}}">

                </ch5-template>
            </template>
                
        </ch5-list>
    </template>    
</ch5-list>

我是 HTML 新手，如果這是一個愚蠢的問題，我深表歉意。

任何幫助將非常感激！ 謝謝

Answer 1

可以使用多種 DOM 方法訪問 HTML 中的元素： getElementById 、 getElementsByTagName 、 getElementsByClassName和querySelectorAll 。

注意：在所有返回結果元素集合的方法中，元素將按照它們出現在頁面上的順序（在 HTML 中）進行排序，因此按鈕順序如下：

let order = [
     "top-left button", "top-right button",
  "bottom-left button", "bottom-right button"
];

---

getElementById

如果得到的button從模板元素放置，他們就會有ID值post-1模板-0和post-2模板-1。 有兩列兩行按鈕，這意味着四個按鈕之間只有兩個唯一的 ID，因此以這種方式選擇元素可能效果不佳。 可能會修改 HTML 代碼以確保按鈕具有唯一的 ID 屬性。 如果該問題可以解決，以下代碼將一次選擇一個按鈕：

let buttonElement = document.getElementById("post-1");
// or if ID can be resolved to be post-0-1:
let firstButtonElement = document.getElementById("post-0-1");

---

getElementsByTagName

使用此方法可以正常工作，因為它會將button元素列表作為HTMLCollection 返回。 它可能會返回頁面上的其他按鈕，但這是一個可以處理的小不便。

let buttonsCollection = document.getElementsByTagName("button");

---

getElementsByClassName

如果您為按鈕使用類而不是 ID，則可以將所有按鈕分配給同一個類，這是按預期選擇所有按鈕而沒有選擇您不想要的按鈕的一種方式。

<template id="template-0">
    <button id="post-1" class="postButtons">Item 1</button>
</template>

<template id="template-1">
    <button id="post-2" class="postButtons">Item 2</button>
</template>

let postButtons = document.getElementsByClassName("postButtons");
console.log(postButtons);

---

查詢選擇器全部

此方法將多種選擇類型合二為一（使用 CSS 選擇器）：

描述	方法調用
標簽名稱	document.querySelectorAll("button");
班級名稱	document.querySelectorAll(".postButtons");
ID	document.querySelectorAll("#post-1");

由於您可以使用CSS Selectors ，您可以選擇具有以post- 開頭的id 值的按鈕，如下所示：

let postButtons = document.querySelectorAll("button[id^=post-]");

---

我不完全確定如何為CH5 庫創建元素，但上面提供的這些步驟應該可以幫助您入門。

代碼片段將上述所有示例合二為一：

 let buttonElementPostOne = document.getElementById('post-1'); console.log("getElementById:".padStart(23, " "), buttonElementPostOne); let buttonsCollection = document.getElementsByTagName('button'); console.log("getElementsByTagName:".padStart(23, " "), buttonsCollection[0]); let postButtons = document.getElementsByClassName('postButtons'); console.log("getElementsByClassName:".padStart(23, " "), postButtons[0]); let postButtonsQueried = document.querySelectorAll('button[id^=post-'); console.log("querySelectorAll:".padStart(23, " "), postButtonsQueried[0]);

 <div> <button id="post-1" class="postButtons">post-1</button> <button id="post-2" class="postButtons">post-2</button> </div> <div> <button id="post-3" class="postButtons">post-3</button> <button id="post-4" class="postButtons">post-4</button> </div>