Question

我有一些html如下：

<form name="test_form">
<input type="hidden" name="product_id" value="560">
<input type="hidden" name="product_name" value="test product">
<input type="hidden" name="product_type" value="7">
<input type="hidden" name="product_id" value="560">
</form>

请注意，“name”有两个属性，其值为“569”。

稍后，使用javascript也会以下列方式查找product_name值：

var c = $("[name='test_form']");
var product_name = c.product_name.value;

相信我，我理解这段代码有多糟糕。但是，我继承了一个像这样编写的代码库，它具有重复的属性，并且javascript分散在以上述方式引用属性的周围。我最终会用更优雅的东西来解决这个问题，但与此同时，需要一些东西来修补它。在firefox中成功查找了product_name，但在google chrome中失败了。任何人都知道快速修复此问题而无需通过代码并删除重复的属性？基本上，我只需要product_name变量部分就可以在google chrome中正确读取product_name属性，尽管存在多个具有该名称的元素（幸运的是，具有该属性名称的所有元素具有相同的值）。再一次，这是我作为临时补丁所需要的东西，所以请不要拿出干草叉。

Answer 1

在创建jQuery对象时，不能使用product_name来查询DOM，可以使用find()和val()方法，请注意单独使用属性选择器效率不高，最好先使用标签选择器。

var $c = $("form[name='test_form']");
var product_name = $c.find('input[name="product_name"]').val();

如果要使用当前代码获取输入的值，则应将jQuery对象转换为DOM Element对象，可以使用[index]或get(index)方法。

var $c = $("form[name='test_form']");
var product_name = $c[0].product_name.value;

http://jsfiddle.net/d7YEV/

Answer 2

如果你正在使用jQuery，你也应该使用它来获取元素值。

所以而不是

var c = $("[name='test_form']");
var product_name = c.product_name.value;

你应该使用

var product_value = $('form[name="test_form"] input[name="product_name"]').val()
var product_type = $('form[name="test_form"] input[name="product_type"]').val()

Javascript引用具有重复属性的元素

2 个答案: