0

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

这是上面的一个jsfiddle：jsfiddle

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

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

示例 1

  • 使 bluebox div 类可单击，如下所示：$(".bluebox").click(function(){}

  • 我应该将输入面板中的值附加到每个它自己的输入标签上，而不是使用 .html

您对我的目标有何建议？为什么我的例子会成功或失败？

非常感谢您！

4

3 回答 3

2

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

我在这里为你准备了一个完整的 jsfiddle http://jsfiddle.net/s6Yxz/26/ :)

于 2012-06-19T20:52:37.080 回答
1

几个一般的想法 - 你可以像这样将数据添加到 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..
});

随着这变得更加复杂，您可能希望在字段名称上使用循环，并针对不同类型的字段进行区分。

于 2012-06-19T20:30:33.957 回答
-1

如果添加按钮没有将数据发布到服务器，您可以使用内联编辑器.bluebox，最后使用保存按钮可以将数据发布#sidebar到服务器。

于 2012-06-19T20:30:11.333 回答