Javascript 表单数据中的对象未正确处理

我有一张我正在处理的表格。这是你的基本地址表。当它提交时，我将它发送到底部的处理脚本。不断出现的问题是，当我提交表单时，脚本只是重复第一个地址，重复的次数等于输入的不同地址数据的数量。我使用一个.each函数遍历输入，然后将它们放入一个函数中，将数据转换为一个对象，并将其存储到一个数组中。我随后会处理这些数据

以下是我在下面使用的表格。我很确定这里没有错，我能想到的唯一一件事是这个名字干扰了这个类，但我看不到在任何时候发生这种情况，因为我从来没有调用过这个名字，我正在使用ajax调用在服务器端获取数据。请注意，这是一个更大表单的片段，因此请不要指出我缺少表单标记

<span class='address-form'>
        <div class='row'>

            <div class='form-group'>
                <div class='col-md-6'>
                        <label>Street Name and Address</label>
                        <input type='text' class='form-control address not-empty' name='adress[]' value="<=$address?>">
                            </div>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='form-group'>
                            <div class='col-md-6'>

                                <input type='text' class='form-control address2' name='address2[]'>
                            </div>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='form-group'>
                            <div class='col-md-3'>
                                <label>City</label>
                                <input type='text' class='form-control city not-empty' name='city[]' value="<?=$city?>">
                            </div>
                            <div class='col-md-3'>
                                <label>State</label>
                                <select class='form-control state not-empty' name='state[]' value="<?=$state?>">
                                    <option value="" selected>--State--</option>
                                    <?=listStates($state, $us_states)?>
                                </select>
                            </div>
                            <div class='col-md-2'>
                                <label>Zip</label>
                                <input type='text' class='form-control zip not-empty' name='zip[]' maxlength='5' value="<?=$zip?>">
                            </div>
                        </div>
                    </div>
                    <div class='row'>
                        <div class='form-group'>
                            <div class='col-md-3'>
                                <label>From</label>
                                <div class='input-group app-input'>
                                    <select class='form-control app-md-input addr_from_month not-empty' name='addr_from_month[]'>
                                        <option value="" selected>mm</option>
                                        <?
                                        for($i = 1; $i < 13; $i++){
                                            print "<option value='".$i."'>$i</option>";
                                        }
                                        ?>
                                    </select>
                                    <select class='form-control app-md-input addr_from_year not-empty' name='addr_from_year[]'>
                                        <option value="" selected>yyyy</option>
                                        <?
                                        $year = date("Y");
                                        for($i = $year; $i > ($year - 25); $i--){
                                            print "<option value=\"$i\">$i</option>\n";
                                        }
                                        ?>
                                    </select>
                                    <span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span>

                                </div>
                            </div>
                            <div class='col-md-3'>

                                <label>To</label>
                                <div class='input-group app-input'>
                                    <select class='form-control app-md-input addr_to_month not-empty' name='addr_to_month[]'>
                                        <option value="" selected>mm</option>
                                        <?
                                        for($i = 1; $i < 13; $i++){
                                            print "<option value='".$i."'>$i</option>";
                                        }
                                        ?>
                                    </select>
                                    <select class='form-control app-md-input addr_to_year not-empty' name='addr_to_year[]'>
                                        <option value="" selected>yyyy</option>
                                        <?
                                        $year = date("Y");
                                        for($i = $year; $i > ($year - 25); $i--){
                                            print "<option value=\"$i\">$i</option>\n";
                                        }
                                        ?>
                                    </select>
                                    <span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </span>

---

提前感谢您为我提供的任何意见和答案。我将根据需要提供编辑和其他信息

在我的评论之后，我认为这将是解决您问题的快速方法：

$('.address').each(function(index) {
    address = new newAddress($('.address').eq(index).val(), 
        $('.address2').eq(index).val(), 
        $('.city').eq(index).val(), 
        $('.state').eq(index).val(), 
        $('.zip').eq(index).val(), 
        $('.addr_from_month').eq(index).val(), 
        $('.addr_from_year').eq(index).val(),
        $('.addr_to_month').eq(index).val(), 
        $('.addr_to_year').eq(index).val());

    addresses.push(address); //build the addresses array of objects
});

---

更新

另一种方法是使用

.map（）

一次性返回

数组。下面的代码就是您需要的所有代码：

var addresses = $('.form-control').map(function (index, element) {
    return {
        line1: $('.address').eq(index).val(),
        line2: $('.address2').eq(index).val(),
        city: $('.city').eq(index).val(),
        state: $('.state').eq(index).val(),
        zip: $('.zip').eq(index).val(),
        from_month: $('.addr_from_month').eq(index).val(),
        from_year: $('.addr_from_year').eq(index).val(),
        to_month: $('.addr_to_month').eq(index).val(),
        to_year: $('.addr_to_year').eq(index).val()
    };
}).get();

在循环中，您缺少使用
$（this）
，即：
$（'.address'）.val（）
。这将始终显示所选结果中的第一个元素。您能进一步解释一下吗？好吧，如果在这个循环中，您总是通过再次选择
$（'.address'）
来获得集合中的第一个元素，那么使用
类
地址
循环所有元素有什么意义？循环的目的是选择
$（this）
引用的元素，该元素将是每次迭代时返回的元素。其他选择器由其他
类组成。您的代码需要重新编写，从
.each（）
循环中使用的选择器开始。您这里的问题是逻辑（算法），而不是
jQuery
、
Javascript
或其他任何东西。这非常好，非常感谢，我从未注意到jQuery库中的.eq函数。这就是为什么我喜欢这个地方我每天都能学到新东西，你真是个了不起的家伙。再次感谢您的帮助！没问题。我正在为这个答案做一个补充，以防你决定采用另一种方法。为了理解不同的概念，看看这个答案会很有趣，但是你首先提供的结果非常好。我用另一种方法更新了答案。是的，没错。例如，它类似于
C#
中的
匿名对象。
var addresses = $('.form-control').map(function (index, element) {
    return {
        line1: $('.address').eq(index).val(),
        line2: $('.address2').eq(index).val(),
        city: $('.city').eq(index).val(),
        state: $('.state').eq(index).val(),
        zip: $('.zip').eq(index).val(),
        from_month: $('.addr_from_month').eq(index).val(),
        from_year: $('.addr_from_year').eq(index).val(),
        to_month: $('.addr_to_month').eq(index).val(),
        to_year: $('.addr_to_year').eq(index).val()
    };
}).get();