Question

我有一个简单的ui，其链接显示“添加项目”。单击此按钮时，会在其下方显示一对输入框。如果再次单击，则会显示另一对。我正在尝试考虑生成这些元素的最佳方法，并将其转换为某种键值对的json数组（每对中的第一个输入元素是键，第二个输入元素是值）。

现在我只有一个计数器并使用它生成ID，例如（在“添加项目”链接的点击事件中）：

$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />');

我不知道使用什么作为“名称”属性，以便从它们创建一个json数组。

Answer 1

你可以在不使用id属性的情况下做这样的事情。

$('#features').append('<div><input type="text" />
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input    type="text" /></div>');

和你的javascript，

var yourArray=[];
$('#yourButton').click(function(){
   $('#features div').each(function(){
      var div=$(this);
      var k=$('input:first',div).val();
      var v=$('input:first',div).next().val();

        yourArray.push({key:k, value: v});

   });

});

Answer 2

只要名称和描述name不同，您对name属性使用的内容无关紧要。假设这些元素都附加到标识为myform的表单中。为每对提供自己的包装器对象。在这里，我使用了div，但fieldset同样合适。

$('#features').append(
    '<div class="feature-div">
    '<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' +
    '<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' +
    '<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' +
    '</div>');

现在，可以合理地提取每一对：

var myarray = [];
$('#myform .feature-div').each(function(i, v) {
    myarray.push([
        $('input[name=name]', v).val(), $('input[name=description]', v).val()]);
});

或者您希望显示数据。

将输入元素对转换为json

2 个答案: