0

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

1 に答える 1

0

フォームが送信されたときに 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));
});​
于 2012-07-19T20:50:56.567 に答える