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

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张图片。 Plus图标不再出现。

我该如何解决这个问题？

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

可能是它可以帮助你......

Answer 2

先决条件： 给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); 

}); 

让我知道这是行不通的。

Answer 3

原因

你甚至没有添加+按钮回。我也建议你看一下样板文字，以帮助格式和多行代码。

你需要确保当你到达终点，是不是有它设置为none，等待别的东西来促使它回到block或W/E，它显示为block或W/E，intially

更新部分：

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