Question

之前可能已经提出过这个问题，或者这个解决方案可能有一个简单的答案，但我目前卡住了。我有这个表格，可以在http://jsfiddle.net/DS73u/看到，用户可以用3种不同的方式输入坐标，并带有唯一的名称。也可以有多个入口，以便用户可以向表单添加更多输入。我遍历检查的每个复选框输入并将值存储到数组2D数组中。它存储什么方案和坐标值的地方。因此，用户输入55.67484和-86.7685它们存储到数组中，可以通过temp [0] [0] = 55.67484 AND temp [0] [1] = -86.7685进行访问。

完成后，我想根据入口分开每组坐标。我将2D数组存储到对象属性中，其中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作为object属性，并将数组添加到具有值的特定属性。

   coordinates[ent_name[i]] = temp;

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

   temp = [];

最后，我将比较变量增加到最新的ent_name：

   i = ent_name.length;

您需要添加 coordinates [ent_name [i]] = temp;在最后一个循环之后，您也可以将最后的元素存储到对象中。

所以结束代码是这样的：

        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;
                    }

我因为浪费了这么多时间而简单而愚蠢但我学到了很多东西。

干杯！破烂

如何使用jquery检测循环中的onchange

2 个答案: