jquery - 单击时使用 jquery 将元素值插入表单

Question

我想使用 jquery 将元素(在本例中为图像)的值在单击时(在绿色 div 中)输入到隐藏表单中，但是当再次单击它们时，值将从表单输入中删除(当元素位于蓝色 div 中时)。我如何做到这一点，需要进入表单的元素值数量不受限制(动态)？为了示例的目的，表单域是可见的，以查看是否输入了值。

DEMO jsFiddle

$(document).ready(function(){
    $("#bottom-div").on("click","img",function(){
        $(this).appendTo("#top-div");
    });
    $("#top-div").on("click","img",function(){
        $(this).appendTo("#bottom-div");
    });
});

Answer 1

您可以在提交表单时收集 target-div 的元素，并将它们作为 JSON 数组以如下形式传递:

$('form').on('submit', function() {
    //create an array
    values = [];
    //add all images in #top-div to the array
    $('#top-div img').each(function() {
        values.push($(this).attr('src'));
    });
    //set the JSON stringified array as the inputs value
    $('input[type=text]').val(JSON.stringify(values));
});​