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

我试图理解X-editable是如何存储这些值的

例如，我有以下代码：

HTML:

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

$.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" }
        ];
    }
});

这里是

正如你所看到的，它工作得很好。在第一步中，我声明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”。这也是非常合乎逻辑的行为

问题：

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

$.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" }
        ];
    }
});

我不希望通过单击可编辑控件的“确定”按钮保存更改不会更改

数据值

属性，它只更改显示的文本。例如，如果我们将值更新为

“value-3”

，并单击“确定”，则

数据值

属性仍将等于1。那么，在再次打开下拉列表后，插件如何在下拉列表中选择合适的值呢

UPD:

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

$.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" }
        ];
    }
});

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

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

---

HTML的

data-*

属性和jQuery的

data（）

方法不是一回事。jQuery通过

data（）

method页的子部分中的

data（）

方法记录它如何处理HTML

data-*

属性：

从jQuery 1.4.3开始，HTML5

data-

属性将自动拉入jQuery的数据对象

data-

属性在第一次访问数据属性时被拉入，然后不再被访问或修改（所有数据值都存储在jQuery内部）

这意味着任何HTML

data-*

属性最初都是在第一次访问该属性时由jQuery提取的，但之后就不再使用了

如果我们重现您的步骤，我们将清楚地看到，尽管将值更改为

value-3

，但标记中的

数据值

属性将保持不变：

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

如果您想更改

数据值

属性以反映此更改，我们可以使用jQuery的

attr（）

方法修改属性：

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

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

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

$（'.editable'）.attr（'data-value'，3）；

value-1

$（'.editable'）。数据（'value'）；
> 1