javascript - 删除图片时如何显示加号按钮？

Question

我的 html 代码是这样的:

<input type='file' multiple style="display: none;" id="upload-file" />
<?php   
    for($i=0;$i<5; $i++) { ?>

    <div class="img-container" id="box<?php echo $i ?>" data-status="0">
        <button type="submit" class="btn btn-primary upload-add-product"<?php 
            if($i!=0) echo' style="display:none;"'; ?> >
            <i class="glyphicon glyphicon-plus"></i>
        </button>

        <button  style="display: none;" class="btn btn-danger show-button">
            <i class="glyphicon glyphicon-trash"></i>
        </button>
    </div>

<?php } ?>

我的 javascript 代码是这样的:

...
$(document).on('click',".show-button",function(){
    var imgTmpl = '<div class="img-container">'+
               '<button  style="display: none;" type="submit" class="btn btn-danger show-button">'+
               '<i class="glyphicon glyphicon-trash"></i>'+
                '</button></div>';
    $(this).parent().remove();
    $('body').append(imgTmpl);
});  

演示和完整代码如下:http://phpfiddle.org/main/code/9kb1-r47h

我的问题是:当我上传 5 张图片时。然后我删除了一张图片。加号图标不再出现。

我该如何解决这个问题？

Answer 1

像这样改变你的代码，它对我有用，

    <style type="text/css">
    .img-container {
        width: 162px;
        height: 142px;
        border: 2px solid black;
        float: left;
        margin-right: 5px;
        position: relative;
    }
    .delete-button {
        position: absolute;
        left: 0;
    }

    .upload-add-product {
        margin-top: 55px;
        margin-left: 55px;
    }

    .img-container .show-button { position: absolute; top: 0; left: 0; }
</style>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<input type='file' multiple style="display: none;" id="upload-file" />
<div class="images-area">
<?php
    for($i=0;$i<5; $i++) { ?>

    <div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>">
        <?php if ($i == 0): ?>
            <button type="submit" class="btn btn-primary upload-add-product">
                <i class="glyphicon glyphicon-plus"></i>
            </button>
        <?php endif; ?>
    </div>

<?php } ?>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

    $(document).on('click','.upload-add-product',function(){
        $("#upload-file").click();
    });

    $(function () {
        $(":file").change(function () {
            var noOfFiles = this.files.length;
            for(var i=0; i < noOfFiles; i++) {
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[i]);
            }
        });
    });

    function imageIsLoaded(e) {
        var imgTmpl = '';
        var IsImgAdded=false;
        $('.img-container').each(function(){
            if($(this).find('img').length==0 && IsImgAdded==false){
                $(this).append(imgTmpl);
                IsImgAdded=true;

                $(this).attr('data-status',1);
                //$(this).find('.upload-add-product').hide();
                //$(this).find('.show-button').show();
                var i = $(this).closest('.img-container').data('index');
                var imgTmpl ='<img height="142" width="162" src='+e.target.result+'>'+
                           '<button type="button" class="btn btn-danger delete-button">'+
                           '<i class="glyphicon glyphicon-trash"></i>'+
                            '</button>';
                $('#box'+i).html('');
                $('#box'+i).append(imgTmpl);
                if(i<5) {
                    $('#box'+(i+1)).html('<button type="button" class="btn btn-primary upload-add-product">'+
                               '<i class="glyphicon glyphicon-plus"></i>'+
                                '</button>');
                }
                $('.img-container').each(function(){
                    if( $(this).attr('data-status') != 1){
                        $(this).find('.upload-add-product').show();
                        return false;
                    }
                })
            }
        });
    };


    $(document).on('click','.delete-button',function(){
        var i = $(this).closest('.img-container').attr('data-index');
        $('#box'+i).remove();
        $('.images-area').append('<div class="img-container" data-status="0"></div>');
        var blank = 0;
        $('.img-container').each(function(i){
            $(this).attr({'id':'box'+i,'data-index':i});
            if(($(this).attr('data-status') == 0) && (blank == 0)) {
                console.log("k");
                blank = i;
            }
        });
        if($('.img-container').find('.upload-add-product').length == 0) {
            $('#box'+blank).append('<button type="button" class="btn btn-primary upload-add-product">'+
                       '<i class="glyphicon glyphicon-plus"></i>'+
                        '</button>');
        }
    });


</script>

演示是 here

可能对你有帮助...