-1

画像はサムネイルとして追加されていますが、削除操作のコードが機能しません。これは私のコードです....
「span.innerHtml」で何か問題が発生しました...知っていますが、解決できません!!
リンクとしての DELETE としての削除操作のスクリプトは正常に機能します....しかし、サムネイルとして画像と統合すると機能しません....

//select the files to be added
<input type="file" id="files" name="files[]"/>
<output id="list"></output>

//code for delete operation(after onClick)
<script>
$(document).ready(function(){ 
    $('a.delete').on('click',function(e){
        e.preventDefault();
        imageID = $(this).closest('.image')[0].id;
        alert('Now deleting "'+imageID+'"');
        $(this).closest('.image')
            .fadeTo(300,0,function(){
                $(this)
                    .animate({width:0},200,function(){
                        $(this)
                            .remove();
                    });
            });
    });

}); 

</script>


//code to add images to thumbnails(before onClick)
<script>
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }


        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<a href="#" class="delete">Delete<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '" width="110" height="150"/></a>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>
4

1 に答える 1

1

何らかの形で機能していて、動的に追加された画像では機能しない場合は、次を変更する必要があります。

 $('a.delete').on('click',function(e){...

に

 $(document).on('click','a.delete', function(e){...

「image」と呼ばれる css クラスがないため、このセレクターも正しくありません。

$(this).closest('.image')

次のようにする必要があります (子要素であるため、find に変更しました):

$(this).find('img')

それ以外の場合は、どのように機能しないのか詳細を共有してください。エラーはありますか？

私が書いたすべてのものを修正した後、それは機能しています（マイナスに感謝します）： http://jsfiddle.net/balintbako/EdkHN/

また、おそらくスパン全体を削除したいでしょう: http://jsfiddle.net/balintbako/EdkHN/1/

于 2013-07-23T07:25:18.140 に答える