具有重複的Javascript引用元素屬性

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> 

注意，有與「名稱」的一個的「569」值的兩個屬性。

後來，使用JavaScript太查找的PRODUCT_NAME值以下列方式：

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

相信我，我明白這個代碼是如何可怕的是。但是，我繼承了一個代碼庫，它的編寫方式與重複的屬性相同，而javascript則以上述方式引用屬性。我最終會用更優雅的東西來解決這個問題，但同時需要一些東西來修補它。 product_name在firefox中成功查找，但在google chrome中失敗。任何人都知道這個快速解決方案，而無需通過代碼並刪除重複的屬性？基本上，我只需要product_name變量部分就可以在谷歌瀏覽器中正確讀取product_name屬性，儘管存在具有該名稱的多個元素（幸運的是，具有該屬性名稱的所有元素具有相同的值）。再次，這是我需要的臨時補丁，所以請不要離開乾草叉。

Answer 1

當你創建你不能查詢DOM使用product_name一個jQuery對象，你可以使用find()和val()方法，注意單獨使用屬性選擇器的效率不高，倒不如先使用標籤選擇器。

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

如果你想使用當前的代碼輸入的值，則應該轉換jQuery對象的DOM元素的對象，你可以使用[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()