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

Question

如何在表单中最优雅地临时存储字符串值数组？

我有一个表单,用户可以在其中编辑文章 - 并添加标签,这些标签只是字符串值.

我不想坚持它,直到用户实际保存整篇文章,所以我需要能够暂时......:

• 显示所选标签的列表
• 将标记添加到列表中
• 从列表中删除标记
• 保存表单时提交值列表

我可以将所有内容存储在逗号分隔的隐藏字段中,但它看起来很难看,而且我更喜欢更强大的类型.

这样做的正确方法是什么？指针的例子非常受欢迎.

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

当然会有更多 - 这不会处理表单标签数据的初始化,添加新标签或向服务器提交标签 - 但希望它会在正确的方向上推动你:)