X可编辑插件如何存储值？

Question

我试图了解X可编辑如何存储这些值。

1. 例如，我有以下代码： HTML: 价值-1 JavaScript: $.fn.editable.defaults.mode = 'inline'；$('.editable').html('value-2')；$('.editable').data('value',2)；$('.editable').editable({源:函数() {返回{值: 1，文本：“值-1”}，{值: 2，文本：“值-2”}，{值: 3，文本：“值-3”}；})； 这是玩小提琴 正如你所看到的，它工作得很好。在第一步中，我声明下拉列表的值等于" value -1“，然后在JavaScript中将其更改为"value-2”。结果，您可以在页面上" value -2“，单击"value-2”后，将选择相同的值。
2. 在这个步骤中，我将修改JavaScript，如下所示： //$('.editable').html('value-2')；$('.editable').data('value',2)； 同样，结果也是非常值得期待的。您将在页面上看到"value-1“，但在打开下拉菜单时将选择"value-2”。
3. 现在让我们以相反的方式更改JavaScript代码$(‘.editable’).html(‘value-2’)；//$('.editable').data('value',2)； 在这些修改之后，页面上的值将等于" value -2"，但是在开始编辑时在下拉列表中选择的值将是" value -1“。这也是非常合乎逻辑的行为。

问题：

我并不期望通过单击可编辑控件的“ok”按钮来保存更改，它不会更改data-value属性，它只会更改显示的文本。例如，如果我们将值更新为"value-3"并单击“OK”，则data-value属性仍然等于1。那么插件如何在重新打开下拉列表后选择适当的值呢？

UPD:

从代码中更改可编辑值的最正确方法是使用

$('.editable').editable('setValue', 'value-1');

Answer 1

HTML的data-*属性和jQuery的data()方法不是一回事。jQuery在data()方法页面的属性子部分中记录了如何通过它的data()方法来处理HTML属性：

从jQuery 1.4.3HTML5属性开始，data-属性将自动进入jQuery。 data-属性在第一次访问数据属性时被提取，然后不再被访问或修改(然后所有数据值都存储在jQuery内部)。

这意味着，在第一次访问该属性时，任何HTML属性最初都由data-*提取，但在此之后不再使用该属性。

如果我们重现您的步骤，我们将清楚地看到，尽管将值更改为value-3，但是标记中的data-value属性将保持不变：

<a class="editable" data-type="select" data-value="1">value-3</a>

但是，jQuery的内部data()方法将存储值更改。我们可以通过从元素的'value'中提取data()属性来看到这一点

$('.editable').data('value');
> 3

如果您想要更改data-value属性以反映这种更改，我们可以通过使用jQuery的attr()方法修改属性来实现这一点：

$('.editable').attr('data-value', 3);

我们的标记现在将如下所示：

<a class="editable" data-type="select" data-value="3">value-3</a>

不过，请注意，如果仅使用attr()方法来设置值，则此更改不会反映在jQuery的该元素的data()对象中：

<a class="editable" data-type="select" data-value="1">value-1</a>

$('.editable').attr('data-value', 3);

<a class="editable" data-type="select" data-value="3">value-1</a>

$('.editable').data('value');
> 1