0

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

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

4

5 回答 5

2

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

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

于 2013-02-13T15:27:08.527 回答
2

您的输入没有该[type=text]属性，因此您的选择器与它们都不匹配。只需删除它，或使用:text选择器：

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

（更新的演示）

于 2013-02-13T15:28:05.437 回答
1

jQuery 属性选择器（以及浏览器查询选择器）使用 DOM 元素而不是它们的属性。如果您没有type在输入元素上明确声明属性，$("[type]")并且document.querySelector("[type]")即使其 type属性为text( http://jsfiddle.net/g76UC/ ) 也不会找到该元素。

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

于 2013-02-13T15:33:18.007 回答
0

采用this

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

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

于 2013-02-13T15:32:44.047 回答
0

试试这个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-13T15:34:14.807 回答