如何用jquery检测循环中的onchange

Question

这可能之前已经被问过，或者这个解决方案可能有一个简单的答案，但我目前陷入困境。我有这个表单，可以在 http://jsfiddle.net/DS73u/ 上看到，用户可以在其中查看以 3 种不同的方式输入坐标并具有唯一的名称。还可以有多个入口，以便用户可以向表单添加更多输入。我循环遍历每个选中的复选框输入并将值存储到数组 2D 数组中。它存储它是什么方案和坐标值的位置。因此，用户输入 55.67484 和 -86.7685，它们将存储到数组中，并且可以通过 temp[0][0] = 55.67484 AND temp[0][1] = -86.7685 访问。

完成之后，我想根据入口分离每组坐标。我将二维数组存储到对象属性中，其中 ent_name 是属性名称。尽管我在根据入口名称拆分值时遇到问题，但我不知道如何比较它，因为所有值都包含在循环内。也许onchange()或change()可以在jquery中工作？文本字段的值永远不会改变......

$(function() {

    /*
        This is where the magic happens when you click
        the "Preview Map" button
        It does several things...

        1.Loops through every checkbox in the #entrances
        2.Check to see if Entrance name has changed and store it into object with  array of coordinates
        2.Checks to see if the checkbox is checked
            a.Yes
                1.We see what checkbox is being checked
                to determine how we want to output the data
                inputted(Hence the switch)
                2.We grab the data from the form and store it
                into an array called coordinates
            b.No
                1.Do nothing
    */

    $('#prev_map').click(function() {

        //Make sure coordinates is empty before proceeding
        coordinates = {};
        temp = [];
        var ent_name;

        //console.log($('#entrances input:checkbox'));
        $('#entrances input:checkbox').each(function(){

            if (this.checked) {
                    //console.log($(this).parent('#coords').prevAll('input').val());
                    //coordinates.push($(this).parent('#coords').prevAll('input').val());
                    ent_name = $(this).parent('#coords').prevAll('input').map(function() {
                        console.log(ent_name);
                    }).get().change(function() {
                        console.log("We changed");
                    });
                    /*
                    ent_name = $(this).parent('#coords').prevAll('input').map(function() {
                        return $(this).val();
                    }).get();


                    console.log("Entrance Name: " + ent_name);
                    if (temp_name != ent_name) {
                        coordinates[temp_name] = temp;
                    } else {
                        temp = [];
                    };
                    var temp_name = ent_name;
                    console.log("Temporary Name: " + temp_name);*/

                switch(this.name) {

                    case "dec_coord":
                        temp.push($(this,'input').next().children('input').map(function() {
                            return $(this).val();
                        }).get());
                        break;
                    case "deg_coord":
                        var temp2 = $(this,'input').next().children("input,select").map(function() {
                            return $(this).val();
                        }).get().join(";");
                        //console.log(temp);
                        temp2 = temp2.toString();
                        temp2 = temp2.replace(";","°");
                        temp2 = temp2.replace(";","'");
                        temp2 = temp2.replace(";","\"");
                        temp2 = temp2.replace(";",",");
                        temp2 = temp2.replace(";","°");
                        temp2 = temp2.replace(";","'");
                        temp2 = temp2.replace(";","\"");
                        temp.push(temp2.split(","));
                        break;
                    case "utm_coord":
                        temp.push($(this,'input').next().children('input,select').map(function() {
                            return $(this).val();
                        }).get().join(","));
                        break;
                }

            } else {
                //console.log("wrong");
            };



        });

        $('#dialog').dialog({
            width: 500,
            height: 400,
            open: function() {
                //loadMap();
            }
        });
    });
    /*
            This is the replication of the Entrance Fields
            We will limit the number of entrances to 5
        */

        var template = $('#entrances .ent_clone:first').clone();
            var cloneCount = 0;

            var addEntrance = function(){
                cloneCount++;
                var entrance = template.clone().find(':input').each(function() {
                    var newID = this.id+cloneCount;
                    //$(this).prev().attr('for', newID);
                    this.id = newID;
                }).end()
                .attr('id', 'ent' + cloneCount)
                .appendTo("#ent");
            };
            $('#addEnt').click(addEntrance);
});

Answer 1

我没有关注这里的所有内容，但听起来您的问题是如何最好地存储您的信息，其中每个入口都有一系列经纬度数据。

如果 ent_name 确实是一个您不希望更改的唯一键，则可能是一个 javascript 对象：

var myEntrances = {};
...
myEntrances[ent_name] = temp;

Answer 2

我要做的是将每个 ent_name 添加到一个数组中，并添加循环值来比较它们。 。所以我这样做了：

   ent_name.push($(this).parent('#coords').prevAll('input').val());
   var testent = $(this).parent('#coords').prevAll('input').val();

之后我创建了一个 if 语句，将数组的第一个值与循环中的最新值进行比较。

   if (ent_name[i].toString() != testent) 

之后，我将 ent_name 设置为对象属性，并将数组与值一起添加到该特定属性中。

   coordinates[ent_name[i]] = temp;

然后我清除了存储最近坐标的临时数组。

   temp = [];

最后，我通过执行以下操作将比较变量增加到最新的 ent_name：

   i = ent_name.length;

您将需要添加
坐标[ent_name[i]] = 温度；在最后一个循环之后，您也可以将最后一个元素存储到对象中。

所以结束代码是这样的：

        ent_name.push($(this).parent('#coords').prevAll('input').val());
    var testent = $(this).parent('#coords').prevAll('input').val();
                    //console.log(ent_name[i++]);
                    //console.log(ent_name);

                    //console.log(temp);
                    if (ent_name[i].toString() != testent) {
                        //console.log(temp);
                        console.log(ent_name);
                        coordinates[ent_name[i]] = temp;
                        temp = [];
                        i = ent_name.length;
                    }

我浪费了这么多时间，虽然简单又愚蠢，但我学到了很多东西。

干杯!
老鼠