-1

アップロードされたファイルの横にテキスト ボックスを作成できるシンプルな jquery スクリプトがあります。

$(function(){

    //------------- Plupload php upload  -------------//
    // Setup html4 version
    $("#html4_uploader").pluploadQueue({
        // General settings
        runtimes : 'html4', 
        url : '../../assets/dashboard/php/upload.php',
        max_file_size : '10mb',
        max_file_count: 15, // user can add no more then 15 files at a time
        chunk_size : '5mb',
        multiple_queues : true,

        // Rename files by clicking on their titles
        rename: true,

        // Sort files
        sortable: true,
    });

    var uploader = $('#html4_uploader').pluploadQueue();
    uploader.bind('FileUploaded', function(up, file, info) {
            if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
                $('.gradient').hide();

                form    = '<form class="form-horizontal" id="form-validate" novalidate="novalidate" method="post">';
                length  = uploader.files.length;
                files   = uploader.files;

                for (var i = 0; i <= length-1; i++) {
                    form+= '<div class="alert alert-success" id="message" style="display:none;"></div>';
                    form+= '<div class="form-row row-fluid">';
                    form+= '<div class="span12">';
                    form+= '<div class="row-fluid">';
                    form+= '<label class="form-label span3" for="medianame">File Title</label>';
                    form+= '<input class="span3 text" id="medianame'+i+'" name="mediatitle[]" type="text">';
                    form+= '<input type="hidden" name="mediapath[]" value="'+files[i].name+'" >';
                    form+= '<strong style="margin-right:20px;" >'+files[i].name+'</strong>';
                    form+= '</div>';
                    form+= '</div>';
                 };

                 form+= '<div class="form-row row-fluid">';
                 form+= '<div class="span12">';
                 form+= '<div class="row-fluid">';
                 form+= '<div class="form-actions">';
                 form+= '<div class="span3"></div>';
                 form+= '<div class="span9 controls">';
                 form+= '<button type="submit" id="submit" class="btn marginR10" style="margin:10px;" >Save</button>';
                 form+= '<button class="btn btn-danger">Delete</button>';
                 form+= '</div>';                  
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</form>';
                 $('#multiform').html(form);

                 $('#submit').click(function()
                 {
                        $.ajax
                        ({
                            type: "POST",
                            url: "",
                            dataType: "json",
                            data: $('form').serialize(),
                            cache: false,
                            beforeSend: function()
                            {
                                $('#message').hide();
                            },
                            success: function(data)
                            {
                                if(data.response)
                                {
                                    $('#message').show().html(data.message);
                                }
                            }
                        });
                        return false;
                 });
            }
        });

});

スクリプトは正常に動作していますが、テキスト ボックスを作成するときに 1 つの問題があり
ます。最初のテキスト ボックスは正常に動作しますが、他のすべてのボックスが無効になっています。それらをクリックしてテキストを書き込むことができません
。何度も変更しようとしましたが、できます。なぜこの問題が起こったのかわかりません

4

1 に答える 1

1

これは、重複したids を生成しているためです。

forループの各反復で「メッセージ」を作成しdivています。sはドキュメント内で一意でなければならないidため、同じ要素を持つ複数の要素を持つことidは無効な HTMLです。id

idjQueryセレクターでそれを選択するか、最初.getElementById()のもののみを選択すると、同じ.id

あなたlabelとそのfor属性にも問題があります。すべてのラベルは、「メディア名」の要素を指していますid。それはに変更する必要があります

<label class="form-label span3" for="medianame'+i+'">FileTitle</label>

次の行で生成される入力と一致します。

于 2013-02-07T16:30:00.077 に答える