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张图片。然后我删除1张图片。加号图标不会再出现。

我该如何解决这个问题？

Answer 1

的原因

您甚至没有添加+按钮。我还建议您查看模板文字以帮助格式化和多行代码。

您需要确保在到达目的地时，不要将其设置为none并等待其他内容将其提示回block或w / e，请将其显示为block或w / e，最初

更新了部分：

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

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

    <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

可能对你有所帮助......

Answer 3

<强>先决条件：将ID分配给删除按钮

然后单击删除按钮，检查id = 0，并相应地将样式应用于加号按钮，如下所示。最后一步是将新创建的加号按钮附加到当前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);

});

如果这不起作用，请告诉我。

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

3 个答案: