Question

我有一个页面有两个不同的输入，包含相同的ID，但每个输入的格式不同。我实际上是通过ID使用get元素将值设置为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=""/>

提前感谢!!

Answer 1

虽然这是一种错误的做法，你应该使用不同的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。

Answer 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>

JS

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

但是，你不应该在一个页面上真正拥有相同的id两次，否则会使维护和调试变得困难。如果改变方法不是一项艰巨的工作，我建议你这样做。

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

希望这有帮助

Answer 4

是。该代码不应该在Dom btw中具有重复的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"/>

相同的ID位于同一HTML页面中

4 个答案: