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

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

>例如,我有以下代码：

HTML：

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); 

在这样的修改之后,页面上的值将等于“值-2”,但是在开始编辑时下拉列表中的选定值将是“值-1”.所以也是非常合理的行为.

题：

我没想到的是,通过单击可编辑控件的“ok”按钮保存更改不会更改数据值属性,它只会更改显示的文本.例如,如果我们将值更新为“value-3”并单击“确定”,则数据值属性仍将等于1.那么插件如何在再次打开后在下拉列表中选择适当的值？

UPD：

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

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

最佳答案

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

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery’s data object.

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

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

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

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

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

如果要更改数据值属性以反映此更改,我们可以通过使用jQuery的attr()方法修改属性来自行完成此操作：

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

我们的标记现在看起来像这样：

请注意,如果您尝试单独使用attr()方法设置值,则此更改不会反映在该元素的jQuery的data()对象中：

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

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

原文地址：https://www.jb51.cc/html/426091.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。