Мой 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 изображение. Значок плюс больше не отображается.
Как я могу решить эту проблему?
измените свой код, как это, это работа для меня,
<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>
Демо здесь
Может быть, это поможет вам …
причина
Вы даже не добавили кнопку « + . Я также предлагаю вам взглянуть на литералы шаблонов, чтобы помочь с форматированием и многоуровневым кодом.
Вы должны убедиться, что, когда вы достигнете конца, вместо того, чтобы установить его как 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(); }
Предварительное условие: присвоить идентификатор вашей кнопке удаления
Затем, нажав кнопку «Удалить», проверьте, равен ли 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); });
Дайте мне знать, если это не сработает.