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

---

querySelectorAll

此方法将多种选择类型合二为一（使用 CSS 选择器）：

Description	Method call
Tag names	document.querySelectorAll("button");
Class names	document.querySelectorAll(".postButtons");
Id	document.querySelectorAll("#post-1");

由于您可以使用 CSS Selectors，因此您可以选择 id 值为 start with post- 的按钮，如下所示：

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

---

我不完全确定如何像 CH5 library 一样创建元素，但上面提供的这些步骤应该可以帮助您开始。

将上述所有示例合二为一的代码片段：

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>