Question

我正在努力实现以下目标：我有一个手风琴，里面有一系列标签。每个选项卡都有一系列输入当用户更改输入时，我想在手风琴标题上显示3个按钮以保存，查看待处理的更改或取消它们。到目前为止这一切都有效！除了查看挂起的更改。单击“查看暂挂”，我想扫描选项卡，找到已更改的任何输入，并在视图按钮下方的“动态”创建的div中显示值（如工具提示 - 不是作为正常div的部分身体）。

我的想法是创建一个多维数组，它将存储Tab名称，输入名称及其值，然后遍历数组以构建要显示的html。

我很难创建多维数组以及如何在创建后循环遍历它。

$('#showpending').click
(
  function()
  {
     var a = $(this).siblings('div.accordion-body');
     var b = $(this);
     if ($(a).find('input.sym-changed').length > 0)
     {
        var ma = {};
        $(a).find('input.sym-changed').each(
           function()
           {
              var n=$(this).parent('div.tab-pane').attr('name');//--this to become h2
              var m=$(this).attr('name');//this to be shown as a label
              var v=$(this).attr('value'); //this to be shown as text
              alert(n); alert(m); alert(v);
               //I am stuck here!!!
              ma.n.m = v;
              alert(ma.n.m);
           }
        );
        //build a div based on the array / object 'ma'
        //show the div as tooltip for the button
     }
      else {alert('no inputs found');}
  }
)

这是我设置的jsFiddle。 http://jsfiddle.net/J6ppR/2/

Answer 1

创建多维数组：

a=[];
for(var i=0;i<5;i++){
    a[i]=[];
    for(var j=0; j<5; j++){
        a[i][j]=j;
    }
}

循环通过多维数组：

for(var i=0; i<a.length; i++){
    for(var j=0; j<a[i].length; j++){
        console.log(a[i][j]);
    }
}

Answer 2

这里需要的是array [] of objects {}。它看起来像这样：

[
 { "name" : "test", "age" : 10 }, //index 0
 { "name" : "test1" ,"age": 15 } //index 1
]

您可以将所有三个内容（选项卡名称，输入名称及其值）包装在object中并将其推送到数组中。比多维数组更具灵活性。首先你声明这个数组：

var arr = []

然后你可以在每个循环中创建一个对象，将这三个元素添加到该对象中，并将该对象添加到数组中：

$（'＃showpending'）。click（function（）{

       var tabs = $('div.accordion-body').find(".tab-pane"),
           masterArray = [];

       if (tabs.find('input.sym-changed').length > 0) {

           tabs.each(function () {
               var obj = {};

               //tab name
               obj.tabName = $(this).attr("name");
               obj.tabArray = [];


               //key and the value array
               $(this).find("input:text").each(

               function () {
                   obj.tabArray.push({
                       "name": $(this).attr('name'),
                           "value": $(this).val()
                   });
               });

               masterArray.push(obj);
           });
       } else {
           alert('no inputs found');
       }


       $.each(masterArray, function (i, tab) {
           $("body").append("<div id='placeholder'></div>");
           var inputs = function () {
               var inp = "";
               $.each(tab.tabArray, function (i, data) {
                   inp += "<li>" + data.name + " : " + data.value + " </li>";
               });
               return inp;
           }();
           $("#placeholder").append("<h1>" + tab.tabName + "</h1><ul>" + inputs + "</ul>");



       });
   });

您可以以任何方式构建对象，但在此处使用对象是您遇到的最好方法。

编辑

对于你目前的情况，我们可以使用这个结构的对象，可以推送到一个数组。

[
 {
  "tabName" : "details",
  "tabArray" : [
                 {"name": "cust_name", "value" : "Test company" },
                 {"name": "cust_reg_name ", "value" : "Registered " }
               ]
 },

 ..and so on
]

通过这个，它也会接受你提供的许多输入。这是您更新的小提琴：http://jsfiddle.net/J6ppR/6/

创建并循环遍历javascript“数组”

2 个答案: