將html輸入值放入javascript對象

爲什麼不是這個代碼給我一個帶有作爲文本輸入的id s的鍵的對象，並將這些值作爲文本輸入的值？將html輸入值放入javascript對象

$(document).ready(function() { 
    $('body').on('click', '#btn', function() { 
     var address = {}; 
     $('input[type="text"].address').each(function (index, element) { 
      address[element.id] = $(element).val(); 
     }); 
     console.log(address); 
    }); 
});

HTML

<input class="address" id="attn" value="john doe"> 
    <input class="address" id="address_1" value="1234 sample st"> 
    <input class="address" id="address_2" value="Suite 1"> 
    <input class="address" id="city" value="chicago"> 
    <input class="address" id="state" value="IL"> 
    <input class="address" id="zip" value="12345"> 
    <input class="address" id="country" value="US"> 
    <input type="button" id="btn" value="btn" />

jsbin

來源

2013-02-13 1252748

我們能看到你的HTML？ – 2013-02-13 15:25:31

@ExplosionPills增加了它。 – 1252748 2013-02-13 15:27:02

這是因爲你的投入沒有type="text"因此$('input[type="text"].address')不返回任何東西。

最好添加它們來表示輸入是文本類型。

來源

2013-02-13 15:27:08 Joseph

但是，即使添加了它，我仍然只是在控制檯中獲取Object Object。 http://jsbin.com/osufok/2/edit – 1252748 2013-02-13 15:29:35

@thomas：展開它，你會看到它的屬性。你的例子適用於我。 – Bergi 2013-02-13 15:32:57

很酷。非常感謝。 – 1252748 2013-02-13 15:35:35

您的輸入沒有[type=text]屬性，因此您的選擇器不匹配它們。簡單地將其刪除，或者使用:text選擇：

var address = {}; 
$(':text.address').each(function (index, element) { 
    address[element.id] = element.value; 
}); 
console.log(address);

（updated demo）

來源

2013-02-13 15:28:05 Bergi

使用this

$('input.address').each(function() {  
     address[this.id]= $(this).val(); 
});

演示http://jsbin.com/osufok/12/edit

來源

2013-02-13 15:32:44 Anton

downvote的原因？ – Anton 2013-02-13 15:34:01

不知道爲什麼你得到一個downvote，但你能解釋爲什麼使用'this'會更好jQuery的'each（index，element）{}'？謝謝！ – 1252748 2013-02-13 15:37:02

那麼，它不是更好，但在這種情況下，索引和元素不需要 – Anton 2013-02-13 15:37:47

jQuery的屬性選擇器（以及瀏覽器的查詢選擇）使用DOM元素而不是它們的屬性。如果您在輸入元素上沒有明確指定type屬性聲明，則$("[type]")和document.querySelector("[type]")將找不到該元素，即使其類型爲屬性爲text（http://jsfiddle.net/g76UC/）。

最簡單的解決方案是將type=text添加到HTML中的輸入元素。另一種是使用不需要此屬性定義的不同選擇器。最後（也是最不可取的）是創建一個單獨的選擇器，例如:prop，它檢查元素的類型屬性。但是，這已經以jQuery的:text的形式存在。

來源

2013-02-13 15:33:18

Gotcha。非常有意義。謝謝。 – 1252748 2013-02-13 15:37:47

試試這一個http://jsfiddle.net/adiioo7/TPYtg/

$(document).ready(function() { 
    $('#btn').on('click', function() { 
     var address = {}; 
     $('.address').each(function (index, element) { 
      address[element.id] = $(element).val(); 
     }); 
     console.log(address); 
    }); 
});

來源

2013-02-13 15:34:14

將html輸入值放入javascript對象

回答

相關問題