删除图像时如何显示加号按钮？

Question

My html code is like this :

<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 } ?>

My javascript code is like this :

...
$(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);
});  

Demo and full code is like this : http://phpfiddle.org/main/code/9kb1-r47h

My problem is : when I uploaded 5 images. Then I delete 1 image. Plus icon does not appear again.

How can I solve this problem?

Answer 1

You didn't even add the + button back in. I'd also suggest you look at template literals to help with formatting and multi-lined code.

You need to make sure that when you reach the end, that instead of having it set as none and waiting for something else to prompt it back to block or w/e, show it as block or w/e, intially

Updated parts:

$(document).on('click',".show-button",function(){
    let pos;
    let i = 0;
    let parent = $(this).parent()[0];

    $(".img-container").each( function() {
        if (this == parent)
        {
            pos = i;
        }
        i++;
    });

    let show = (pos === 4) ? "block" : "none";

    var imgTmpl = '<div class="img-container" data-status="0">'+
                    '<button style="display: ' + show +'" type="submit" class="btn btn-primary upload-add-product" onclick="upload_click();">' +
                '<i class="glyphicon glyphicon-plus"></i>' +
                '</button>' +
               '<button  style="display: none;" type="submit" class="btn btn-danger show-button">'+
               '<i class="glyphicon glyphicon-trash"></i>'+
                '</button></div>';
    //console.log($(this).parent());
    $(this).parent().remove();

    $('body').append(imgTmpl);
});     

function upload_click()
{
    $("#upload-file").click();
}

http://phpfiddle.org/main/code/xzq8-h3ub

Answer 2

change your code like this , it is work for me,

    <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>

Demo is here

May be it helps you...

Answer 3

Prerequisite: Assign id to your delete button

Then On click of delete button, check if id =0 and accordingly apply style to your plus button as below. Last step is to append newly created plus button to current div.

$(".btn-danger").click(function(){

$id=this.id;
if($id!=0){
var r= $('<button type="submit" class="btn btn-primary upload-add-product" style="display:none;">
            <i class="glyphicon glyphicon-plus"></i>
        </button>');
}
else{
var r= $('<button type="submit" class="btn btn-primary upload-add-product">
            <i class="glyphicon glyphicon-plus"></i>
        </button>');
}


 $(this).parent().append($r);

});

Let me know if this doesn't work.