为相似的文本输入框避免许多相似的 ID答案

【问题标题】：Avoiding many similar IDs for similar text entry boxes为相似的文本输入框避免许多相似的 ID
【发布时间】：2021-10-17 17:38:26
【问题描述】：

在一个演示站点中，我有四个文本框，它们被分成两对两个（两个维度，每个维度有两组）。我只使用 ID 和命名方案来让 javascript 单独读取每一个。有没有一种更简洁的方式来使用元素选择器来避免有这么多类似命名的 ID 和重复的代码？ CSS 选择器可以用于此目的吗？

示例 HTML

    <form id="user-dimension-form" action="javascript:processDimensionInput();plotScatter()" autocomplete="off">
        <div class="user-dimension-area">
            <label>Dimension 1 Name
                <!-- TODO: better naming scheme in CSS -->
                <input class="user-dimension-name" id="user-dimension-feature1-name-input" type="text">
            </label>

            <div class="user-dimension-entry">
                <textarea class="user-dimension-feature-set" id="user-dimension-feature1-set1" rows="16"></textarea>
                <textarea class="user-dimension-feature-set" id="user-dimension-feature1-set2" rows="16"></textarea>
            </div>
        </div>
        <div class="user-dimension-area">
            <label>Dimension 2 Name
                <input class="user-dimension-name" id="user-dimension-feature2-name-input" type="text">
            </label>
            <div class="user-dimension-entry">
                <textarea class="user-dimension-feature-set" id="user-dimension-feature2-set1" rows="16"></textarea>
                <textarea class="user-dimension-feature-set" id="user-dimension-feature2-set2" rows="16"></textarea>
            </div>


        </div>

        <button type="submit">Submit</button>

        <span id="user-dimension-message"></span>

    </form>

读取显示重复代码的文本区域的示例 javascript。我应该避免手动将 HTML ID 字符串连接在一起吗？

    const feature1Set1Input = parseInput("user-dimension-feature1-set1");
    const feature1Set2Input = parseInput("user-dimension-feature1-set2");
    const feature2Set1Input = parseInput("user-dimension-feature2-set1");
    const feature2Set2Input = parseInput("user-dimension-feature2-set2");

【问题讨论】：

命名方案通常是个人的。当然你需要遵循一定的命名约定，但它实际上只是归结为一般的创造力。您可以让它们都以数字结尾并使用 js 遍历它们。但即便如此，您需要管理的数据可能是独一无二的，因此在使用迭代选择它们后您可以做的事情仍然非常有限。
我应该澄清这个问题并不是真正关于命名方案 - 更多关于如何选择元素而不使用这么多听起来相似的名称。
我收集了很多，但这仍然是关于如何更有效地命名事物。你必须深入挖掘你的创造力朋友！
我虽然可能会使用 CSS 选择器，但我不知道以这种方式使用它们是否是一种好习惯。
我从未尝试过，但这并不意味着不应该这样做。

标签： javascript html dom css-selectors code-duplication

【解决方案1】：

鉴于上述 html，我想您可以执行以下操作：

let form = document.getElementById('user-dimension-form');
let inputs = form.querySelectorAll('textarea');
let values = [];
inputs.forEach( input => values.push(input.value) );

虽然我不确定。看不到任何好处。

【讨论】：

有趣的方法，但沿途失去了两对的结构
@qwr - 不，是的。你有命名变量，我有连续的数组索引。数组中的许多元素可以用很少的代码来处理。相比之下，必须输入每个输入的名称。 ;)
是的，这是真的。也许我可以用一个两层深的嵌套数组来表示结构

【解决方案2】：

我想出的方法是使用 CSS 选择器。因此，每个输入都被命名为 "user-feature-words feature0 set0" 之类的类，并且它是由类似的东西选择的

document.querySelector(`.user-feature-words.feature${i}.set${j}`)

当然，因为我正在组合 CSS 选择器，所以我可以使用相同的字符串来获得唯一的 ID。

【讨论】：