Question

我正在构建一个小的网页，该网页将用于通过预定义的设置操作来控制一组RGB led。为了以图形方式配置操作，将使用一个包含开始和结束像素，相关颜色信息以及要使用的设置操作的表单。

（顺便说一句，不提交表单，因此，如果其他结构更好用，则可以改用它。表单支持name，尽管这样至少对其中一些有所帮助。Javascript解析将表单中的数据保存到稍后通过AJAX发送的JSON文件中。我已经弄清楚了大部分内容，但是在部分中，我要提出的问题使其中的问题变得复杂试图以一种简单的方式一次读取所有形式的数据。）

每个表单都有一些动作（用于选择该动作的下拉菜单的onChange或删除按钮）应该仅影响该表单（或其一部分）。还应该有一种一次性获取所有表单并提取数据以发送到服务器的方法（使用name可以正常工作，因为THAT数据安全地包含在可访问表单的元素中。）

由于无法访问Internet，因此我也无法使用JQuery之类的帮助程序库。所有代码都必须托管在服务器上，而且空间非常小（托管它的是嵌入式处理器）。我现在不想添加40KB的Jquery。

我遇到的问题是，我需要根据选择的选项来更改标签文本并显示或隐藏元素。

例如，一种颜色只需要一个颜色输入标签，而线性渐变则需要两个颜色标签。其他人则不需要颜色，因为它们可以对现有的颜色模式执行操作。

使用form可以通过查找form_as_JS_var.elements.name来访问具有name属性集的事物。遗憾的是，这不适用于原始HTML或span或除表单特定元素以外的任何元素。我还发现document.getElementById()除了document以外没有其他功能（如果目前为止还不很清楚，我对HTML和JS还是有些陌生）。我一直希望做类似.getElementById（“ color1”）之类的事情（它可能会让我使用相同的标签以简化操作，只要它们不会以每种形式重复使用，但事后看来有点愚蠢）。无论哪种方式，我都需要确保每个添加的表单和 以某种方式查找时，每个表单都包含多个全局唯一ID。受影响的商品和触发更改的商品的格式相同！

我 did 发现了label标记，但是它（出于某些无法解释的原因）绑定到ID而不是名称（确实很烦人）使用JS，但这是另一回事了。因此，我仍然坚持使用从document访问的全局唯一ID，而不是使用任何形式的局部表单方法。

我要使用的HTML表单如下：

<form id="color_form_0" class="color_form">
  <fieldset>
    <legend id="legend_0">New Control Entry</legend>
    <label for="legend_0">Type: </label>
      <select name="type" id="type_0">
        <option value="rainbow">Rainbow Pattern</option>
        <option value="repeat">Clone Fill</option>
        <option value="fade">Linear Fade</option>
        <option value="fill">Single Color</option>
        <option value="rotate">Animation</option>
      </select>
    <label for="color1_0">Color 1: </label>
      <input type="color" name="color1" id="color1_0">
    <label for="color2_0">Color 2: </label>
      <input type="color" name="color2" id="color2_0">
    <br>
    <label for="range1_0">Range Start: </label>
      <input type="number" max="80" min="0" id="range1_0">
    <label for="range2_0">Range End: </label>
      <input type="number" max="80" min="0" id="range2_0">
  </fieldset>
</form>

请注意，其中很多都需要唯一的ID（添加了_＃部分）。我必须具有标签的GUID才能正确访问它们（没有ID使得标签不可访问，非唯一ID使它们的 all 等同地绑定到 every 项） ID（跨表格）。我还必须有一个ID才能更改图例标签的名称（应该更改为与当前选择的Type相匹配。

我期望能够做的是：

<form>
  <button onclick="doStuff()">foo</button>
  <some_tag_here>
</form>

在doStuff中使用Javascript基本上是这样的（可能不是很准确；读为伪代码）：

function doStuff(b){
  var par=b.parentNode;
  var otherTag=par.SomeHowGetOtherTagPerhapsByNonUniqueIdOrClassNameMightAlsoWork();
  otherTag.innerHtml="<blink>Success!!!</blink>";

相反，我可以通过name访问某些项，但不是我需要更改的所有项，并且label标签虽然一开始似乎很适合，但仍然必须具有唯一的ID。 name方法可以进行这种树遍历，但这并不完美。我的另一个想法childNode是一个数组，我不确定如何搜索需要修改的一个（或几个）节点，并且可能假定那里已经有某种标识符……再次输入ID。

TL; DR：

我正在尝试以按钮（或其他元素）触发功能的相同形式来编辑项目。有多种形式，我不想影响其他形式。我可以捕获this并获取包含要编辑的内容的按钮的父按钮（本质上是表单）。

我无法弄清楚如何有效或简单地更改表单中非表单特定元素的任何内容（即更改告诉用户某些内容的简单文本）。到目前为止，我发现的所有解决方案都需要进行 global -scale查找，该查找要求多种形式的每个在每个元素或每个label-上都具有唯一的ID。 ed，并且当数据恰好位于要查找的元素附近时，使我感到效率低下。

后者假设document.getElementByX比假设的getParent.getChild类型操作（这是我想要要执行的操作）要昂贵的多，但为了避免在编码时感到头疼，即使不是这种情况，更本地化的方法也会很好。

Answer 1

使用querySelector()方法，它可以应用于容器并在该容器中搜索。

function doStuff(b){
  var par=b.parentNode;
  var otherTag=par.querySelector("div");
  otherTag.innerHTML="<span style='color: red;'>Success!!!</span>";
}

<form>
  <button type="button" onclick="doStuff(this)">foo</button>
  <div></div>
</form>

使用javascript

1 个答案: