Question

为什么这段代码没有给我一个对象，其中键作为文本输入的id，而值作为文本输入的值？

JS

$(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

Answer 1

这是因为您的输入没有type="text"因此$('input[type="text"].address')没有返回任何内容。

最好添加它们以表示输入是文本类型。

Answer 2

您的输入没有[type=text]属性，因此您的选择器不会匹配任何属性。只需将其删除，或使用:text选择器：

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

（updated demo）

Answer 3

jQuery属性选择器（以及浏览器查询选择器）使用DOM元素而不是它们的属性。如果您未在输入元素上明确指定type属性声明，则$("[type]")和document.querySelector("[type]")将无法找到该元素，即使其类型 property 为{ {1}}（http://jsfiddle.net/g76UC/）。

最简单的解决方案是将text添加到HTML中的输入元素。另一种方法是使用不需要此属性定义的不同选择器。最后（也是最不可取的）是创建一个单独的选择器，例如type=text，用于检查元素的类型属性。然而，这已经以jQuery的:prop。

的形式存在

Answer 4

使用this

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

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

Answer 5

试试这个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);
    });
});

将html输入值放入javascript对象

5 个答案: