Question

我试图了解X-editable如何存储值。

例如，我有以下代码：

HTML：

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

JavaScript的：

$.fn.editable.defaults.mode = 'inline';

$('.editable').html('value-2');
$('.editable').data('value',2);

$('.editable').editable({
    source: function () {
        return [
            { value: 1, text: "value-1" },
            { value: 2, text: "value-2" },
            { value: 3, text: "value-3" }
        ];
    }
});

这是jsfiddle to play with

正如你所看到它运作得很好。在第一步，我将dropdown的值声明为“value-1”，然后在JavaScript中将其更改为“value-2”。结果，您可以在页面上“value-2”，并在点击下拉列表后选择“value-2”，将选择相同的值。

在此步骤中，我将修改JavaScript，如下所示：
```
//$('.editable').html('value-2');
$('.editable').data('value',2); 
```
结果再次令人期待。您将在页面上看到“value-1”，但在打开下拉列表时将选择“value-2”。
现在让我们以相反的方式更改JavaScript代码
```
$('.editable').html('value-2');
//$('.editable').data('value',2); 
```
在进行此类修改后，页面上的值将等于“value-2”，但在开始编辑时下拉列表中的选定值将为“value-1”。所以也是非常合理的行为。

问题：

我不希望通过单击可编辑控件的“确定”按钮保存更改不会更改data-value属性，它只会更改显示的文本。例如，如果我们将值更新为"value-3"并单击“确定”，则data-value属性仍将等于1.那么插件在再次打开后如何在下拉列表中选择正确的值？

UPD：

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

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

Answer 1

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

从jQuery 1.4.3开始，HTML 5 data-属性将自动引入jQuery的数据对象。

第一次访问数据属性时，data-属性被拉，然后不再被访问或变异（所有数据值随后都存储在jQuery中）。

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

如果我们重现您的步骤，我们会清楚地看到，尽管将值更改为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＆＃39; 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

X-editable就地编辑插件如何存储值？

1 个答案: