使用 JQuery 在表单中暂时存储键值对的最简单方法

Question

如何用最优雅的方式暂时存储一个字符串值数组在表单中？

我有一个表单，用户可以编辑文章并添加标签，这些标签只是字符串值。

我不想在用户保存整篇文章之前将其持久化，因此我需要能够暂时地执行以下操作：

• 显示已选择的标签列表
• 向列表中添加标签
• 从列表中删除标签
• 在保存表单时提交值列表

我可以把所有内容都存储在一个逗号分隔的隐藏字段中，但这似乎很丑陋，我更喜欢一些强类型的方式。

正确的做法是什么？非常欢迎提供示例。

- Kjensen

Answer 1

JQuery提供了data方法，可以精确地处理这些情况！它直接与本地JavaScript对象一起使用，因此无需使用逗号分隔的列表 - 只需使用数组或对象。也许像这样做可以让你走上正确的轨道。

// initialize existing tags
$('#form').data('tags', { foo: true, bar: true });

// add a new tag
$('#form').data('tags').baz = true;

// remove an existing tag
$('#form').data('tags').bar = false;

$('#form').data('tags');
// { foo: true, bar: false, baz: true }

如果将标签保留在对象中，而false则可以帮助您查看哪些标签需要在服务器端取消分配；这不是必要的，但对您可能有用。

如果您希望从对象中完全删除已删除的值，请使用delete构造。

// remove an existing tag
delete $('#form').data('tags').bar;

---

编辑：为了回应您对此答案的评论并给您一些想法：

<ul class="tags">
    <li>
        <span class="tag-name">foo</span>
        <a href="#" class="tag-remove">remove</a>
    </li>
</ul>

而你的 JavaScript 代码：

$(function() {
    $('#form .tag-remove').click(function(e) {
        // update the tag data
        var tag = $(this).siblings('.tag-name').text();
        $('#form').data('tags')[tag] = false;

        // remove the tag element
        $(this).parent().remove();

        return false;
    });
});

当然还有更多 - 这并没有处理表单标签数据的初始化，添加新标签或将标签提交到服务器 - 但希望它能引导您朝着正确的方向前进 :)

- Alex Barrett

---

非常有用！ :)跟进：也许您可以添加一个基于键修改值的示例？函数remove(key) { $('#form').data('tags')....??? } - Kjensen

对不起，我不太确定我是否理解了，但是这个附加的部分是否回答了你的问题呢？ - Alex Barrett

我想编写一个函数，以便从标签数组中删除键。这样，当我显示每个项目时，我可以将此HTML放入其中：<li>foo<a href="remove('foo')">remove</a></li>。 - Kjensen