0

我创建了一个 div 和一个按钮。单击按钮时，将有一组元素（包括 1 个选择框和 2 个文本输入）插入到 div 中。用户可以添加尽可能多的组，当他们完成输入他们添加的所有组的数据时，他可以点击保存按钮，这会将每个组中的值一个一个地保存到 JSON 对象数组中。但是我被困在如何从每个组中获取价值的部分，所以请帮忙，谢谢。

下面列出了 div 和添加组按钮功能 -- AddExtra() 的代码：

<div id="roomextra">
</div>

function AddExtra() {
$('#roomextra').append('<div class=extra>' +
'<select id="isInset">' +
'<option value="Inset">Inset</option>' +
'<option value="Offset">OffSet</option>' +
'</select>' + 
'Length(m): <input type="text" id="insetLength">' +
'Width(m): <input type="text" id="insetWidth">' +
'Height(m): <input type="text" id="insetHeight">' +
'</div>');
}

function GetInsetOffSetArray (callBack) {

  var roomIFSDetail = [{
   "IsInset": '' ,
   "Length": '' , 
   "Width": ''  , 
   "Height": ''
  }];

//should get all the value from each group element and write into the array.

callBack(roomIFSDetail);

}
4

4 回答 4

1

这应该差不多了。但是，如果您要动态创建这些组，则需要使用 id 以外的其他内容。您可能想为它们添加一个类或一个data-*属性。在这种情况下，我使用了一个类。将这些类添加到您的控件中，以便我们知道哪个是哪个。

var roomIFSDetail = [];
var obj;

// grab all of the divs (groups) and look for my controls in them
$(.extra).each(function(){
  // create object out of select and inputs values
  // the 'this' in the selector is the context. It basically says to use the object
  // from the .each loop to search in. 
  obj = {
           IsInset: $('.isInset', this).find(':selected').val() ,
           Length: $('.insetLength', this).val() ,
           Width: $('.insetWidth', this).val() , 
           Height: $('.insetHeight', this).val()
        }; 
  // add object to array of objects
  roomIFSDetail.push(obj);
});
于 2013-05-07T15:17:55.580 回答
0

一个常见的问题。几件事：

  1. 您不能在要重复的部分中使用 ID，因为 DOM 中的 ID 应该是唯一的。

  2. 我更喜欢在我写很多东西的地方使用标记，并在代码中修改它而不是在那里生成它。

http://jsfiddle.net/b9chris/PZ8sf/

HTML：

<div id=form>
... non-repeating elements go here...

<div id=roomextra>
<div class=extra>

<select name=isInset>
<option>Inset</option>
<option>OffSet</option>
</select>
Length(m): <input id=insetLength>
Width(m): <input id=insetWidth>
Height(m): <input id=insetHeight>

</div>
</div>

</div>

JS：

(function() {
// Get the template
var container = $('#roomextra');
var T = $('div.extra', container);

$('#addGroup').click(function() {
    container.append(T.clone());
});

$('#submit').click(function() {
    var d = {};
    // Fill d with data from the rest of the form

    d.groups = $.map($('div.extra', container), function(tag) {
        var g = {};
        $.each(['isInset', 'insetLength', 'insetWidth', 'insetHeight'], function(i, name) {
            g[name] = $('[name=' + name + ']', tag).val();
        });

        return g;
    });

    // Inspect the data to ensure it's what you wanted
    debugger;
});

})();

因此，不断重复的模板是用普通的旧 HTML 编写的，而不是一堆相互附加的 JS 字符串。使用名称属性而不是 id 可以保持这些元素通常的工作方式，而不会违反任何 DOM 约束。

你可能会注意到我没有引用我的属性，从选项中取出值属性，从输入中取出类型属性，以保持代码有点干燥。HTML5 规范不需要引用您的属性，如果您没有明确指定 value 属性，则选项标签的值是文本，如果没有指定，则输入标签默认为 type=text，所有这些加起来就是更快的阅读和更苗条的 HTML。

于 2013-05-07T16:42:40.417 回答
0

您最好不要使用 id 属性来标识选择和输入，而是使用 name 属性。例如

 $('#roomextra').append('<div class=extra>' +
     '<select name="isInset">' +
     '<option value="Inset">Inset</option>' +
     '<option value="Offset">OffSet</option>' +
     '</select>' + 
     'Length(m): <input type="text" name="insetLength">' +
     'Width(m): <input type="text" name="insetWidth">' +
     'Height(m): <input type="text" name="insetHeight">' +
     '</div>');
 }

然后， usr foreach 进行迭代

 $(".extra").each(function() {
     var $this = $(this);
     var isInset = $this.find("select[name='isInset']").val();
     var insetLength = $this.find("input[name='insetLength']").val();
     // ... and go on
 });
于 2013-05-07T15:18:30.267 回答
-1

使用 $(".extra").each(function() {

//在这里从ctrls中提取信息

});

这将遍历所有额外的 div，并允许您将所有值添加到数组中。

于 2013-05-07T15:04:13.727 回答