-1

图像被添加为缩略图，但删除操作的代码无法正常工作。这是我的代码……
我知道的“span.innerHtml”出了点问题……但无法解决！！
删除操作的脚本作为删除链接工作正常....但是当与图像作为缩略图集成时它无法工作....

//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')

它应该是（将其更改为查找，因为它是子元素）：

$(this).find('img')

否则，请分享一些细节，它是如何不起作用的。有什么错误吗？

在修复了我写的所有东西之后它正在工作（所以感谢减号）：http: //jsfiddle.net/balintbako/EdkHN/

你也可能想删除整个跨度：http: //jsfiddle.net/balintbako/EdkHN/1/

于 2013-07-23T07:25:18.140 回答