jquery - 使用 jquery onlick 将元素值插入到表单中

Question

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

演示 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));
});​