同一 HTML 页面中的相同 ID答案

【问题标题】：Identical ID's in the same HTML page同一 HTML 页面中的相同 ID
【发布时间】：2017-07-14 21:47:25
【问题描述】：

我的页面有两个不同的输入，它们包含相同的 ID，但每个输入的形式不同。我实际上是使用按 ID 获取元素为来自 javascript 的输入设置值。我知道这是无效的。但问题是，如果我更改其中一个输入 ID，我将需要在“购物车”中重新编写一堆代码，因为这些输入将值传递给购物车。我实际上暂时不打算碰它。那么，是否有任何技巧可以针对一个输入而不是另一个输入，即使它们具有相同的 ID？

例如：

<input type="hidden" name="cart_1_ID_Add2"  id="cart_1_ID_Add2" value=""/>


<input type="hidden" name=cart_1_ID_Add2"   id="cart_1_ID_Add2" value=""/>

提前致谢！！

【问题讨论】：

好吧，您必须使用 getElementById() 以外的其他内容，因为您要求 ID 没有用处。 document.querySelector() 可能会起作用，如果您可以设计一个标识目标元素的查询。
您需要更改其中一个表单 ID。您不能在一个页面上多次使用相同的 ID - 只要您这样做，getElementById() 肯定不会起作用。
一个ID应该是唯一的在一个页面中（就像人们在一个“国家”中拥有唯一的ID一样）
问题是这些输入没有从 javascript 中获得任何值，除了通过 id 和名称一起获取元素，所以基本上我必须为输入分配相同的名称和 id 以便它从 javascript 获取数据。
如果您想通过其他方式识别元素，可以使用name 或class。正如其他人指出的那样，这不是标准的做法。如果您现在返回并更改它以拥有唯一的 Id，您可能会避免以后不得不返回并让它变得更糟。

标签： javascript php jquery html tags

【解决方案1】：

虽然这是一种错误的做法，并且您应该使用不同的 id，但您可以为每个 id 添加不同的类属性。

<input class="input1" type="hidden" name="cart_1_ID_Add2"  id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2"   id="cart_1_ID_Add2" value=""/>

var x = document.getElementsByClassName("input1")[0];

再次重申：我强烈建议您花时间更改程序逻辑以使用唯一 ID。

【讨论】：

公平地说，这是一个非常好的主意。但是，我认为重要的是要说明在正常用例中应该切换 ID 和类 - 使用类作为 ID 不应被视为规范。
其实我完全同意@mfisher91。正确的方法是使用唯一的 id 和重复的类（如有必要）。

【解决方案2】：

如果它们采用不同的形式，您可以通过选择它们在特定类中的 ID 来定位它们。您也可以更改 name 属性并选择它。

HTML

<div class="form1">
    <input type="hidden" name="rename1"   id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
    <input type="hidden" name="rename2"   id="cart_1_ID_Add2" value="">
</div>

$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")

但是，您不应该在一个页面上出现两次相同的 id，否则会导致难以维护和调试。如果改变你的方法不是一项艰巨的工作，我建议你这样做。

【讨论】：

【解决方案3】：

为一个或两个标签添加另一个属性。例如，您可以制作它们

<input type="hidden"name="cart_1_ID_Add2"  id="cart_1_ID_Add2" data-id="add100"  class="myInput" value=""/>


<input type="hidden" name=cart_1_ID_Add2"   id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>

然后用 jQuery 获取它们的值

var myInput = $('[data-id=add100]').val();

console.log(myInput);

或者通过添加一个类并获取值来使用纯 javascript

 var myVal = document.getElementsByClassName("myInput")[0];
 console.log(myVal.value);

希望对你有帮助

【讨论】：

【解决方案4】：

是的。顺便说一句，该代码不应在 Dom 中有重复的 id 属性。

您可以使用自定义 HTML 元素属性：

<input type="hidden" name="cart_1_ID_Add2"  id="cart_1_ID_Add2" value="" my-property="some_identifier"/>


<input type="hidden" name=cart_1_ID_Add2"   id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>

【讨论】：