jQuery：如何在jQuery中编辑附加的输入值？

Question

我左边有一些输入值（我们称之为输入面板）。单击添加按钮时，这些输入值将附加到名为bluebox的div右侧边栏中

这是上面的一个jsfiddle：jsfiddle

现在我希望用户能够点击其中一个div并编辑附加的输入值并保留更改。我更喜欢输入再次出现在输入面板中，而不是“保存/保持更改按钮”

我想到了一些方法来做到这一点，但我是一个初学者，所以可能非常错误;）：

示例1

• 将bluebox div类可点击为：$(".bluebox").click(function(){}

• 我应该将输入窗格中的值附加到每个输入标签

，而不是使用.html。

您对我的目标有何建议？ 为什么我的例子会工作还是失败？

非常感谢你！

Answer 1

我建议您添加一个保存按钮，一个隐藏的blueboxid div，用于跟踪单击的蓝盒，以及稍微更模块化的设计，以便您可以更轻松地考虑更改（并使事情更易于阅读）。

我在这里有一个完成的jsfiddle http://jsfiddle.net/s6Yxz/26/：）

Answer 2

一些一般性的想法 - 您可以将数据添加到bluebox div中，如下所示：

$('<div>').addClass('bluebox').data({ field1: field1.val(), /* field 2 etc.. */ });

然后检索如下的值：

$('.bluebox').click(function() {
  field1.val( $(this).data('field1') );
  // field 2 etc..
});

或者您可以在蓝框中创建跨度结构：

bluebox = $('<div>').addClass('bluebox');
bluebox.append($('<span>').attr('data-name', 'field1').text(field1.val()));
// field 2 etc..

然后检索如下的值：

$('.bluebox').click(function() {
  field1.val( $(this).find('span[data-name=field1]').text() );
  // field 2 etc..
});

随着这变得越来越复杂，您可能希望对字段名称使用循环，并使用不同类型字段的情况。

Answer 3

如果 add-it 按钮未将数据发布到服务器，您可以使用.bluebox上的内联编辑器，最后使用 save-it 按钮，您可以将#sidebar中的数据发布到服务器。