如果前一個為空，則隱藏下一個元素

Question

我有一個可以上傳文件的盒子。 一開始，我只想顯示一個方框。 然后，當我上傳圖像時，出現第二個框並顯示其自身。 相反，當我刪除圖像時，該框必須隱藏。 我能怎么做？ 這是完整的代碼： https : //jsfiddle.net/jfkpc6je/

jQuery代碼：

function readURL(input) {
    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function(e) {
            var $parent = $(input).parent(),
                $nextEl = $parent.next();

            $parent.hide();
            $nextEl.find('.file-upload-image').attr('src', e.target.result);
            $nextEl.show();
            $nextEl.find('.image-title').html(input.files[0].name);
        };

        reader.readAsDataURL(input.files[0]);

    } else {
        removeUpload();
    }
}

function removeUpload(button) {
    var $parent = $(button).parent().parent();

    $parent.hide();
    $parent.prev().show();
}
$('.image-upload-wrap').bind('dragover', function() {
    $('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function() {
    $('.image-upload-wrap').removeClass('image-dropping');
});

Answer 1

您必須在此處進行3個更改。

1. 隱藏所有文件上載 div ，但第一個除外。

   .image-upload-wrap ~ .image-upload-wrap { display: none; }

2. 完成文件上傳后，顯示下一個文件上傳 div 。（readURL方法）

   $(input).parent().nextAll(".image-upload-wrap:first").show();

3. 刪除附件時，隱藏以下所有文件上傳 div 。（removeUpload方法）

   $parent.nextAll(".image-upload-wrap").hide();

   隱藏在文件上傳分區上方（在某些情況下）

   $parent.prevAll(".image-upload-wrap").hide();

現場演示

堆棧示例：

  function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { var $parent = $(input).parent(), $nextEl = $parent.next(); $parent.hide(); $nextEl.find('.file-upload-image').attr('src', e.target.result); $nextEl.show(); $nextEl.find('.image-title').html(input.files[0].name); }; reader.readAsDataURL(input.files[0]); $(input).parent().nextAll(".image-upload-wrap:first").show(); } else { removeUpload(); } } function removeUpload(button) { var $parent = $(button).parent().parent(); $parent.prevAll(".image-upload-wrap").hide(); $parent.hide(); $parent.prev().show(); $parent.nextAll(".image-upload-wrap").hide(); } $('.image-upload-wrap').bind('dragover', function() { $('.image-upload-wrap').addClass('image-dropping'); }); $('.image-upload-wrap').bind('dragleave', function() { $('.image-upload-wrap').removeClass('image-dropping'); }); 

  body { font-family: sans-serif; background-color: #eeeeee; } .file-upload { background-color: #ffffff; width: 600px; margin: 0 auto; padding: 20px; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: #1FB264; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #15824B; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .file-upload-btn:hover { background: #1AA059; color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .image-upload-wrap ~ .image-upload-wrap { display: none; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 4px dashed #D2D2D2; position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: #1FB264; border: 4px dashed #D2D2D2; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text h3 { font-weight: 100; text-transform: uppercase; color: #15824B; padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #cd4535; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #b02818; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="image-upload-wrap" id="1"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload(this)" class="remove-image">Remove <span class="image-title">Uploaded Image</span> </button> </div> </div> <div class="image-upload-wrap" id="2"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload(this)" class="remove-image">Remove <span class="image-title">Uploaded Image</span> </button> </div> </div> <div class="image-upload-wrap" id="3"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload(this)" class="remove-image">Remove <span class="image-title">Uploaded Image</span> </button> </div> </div> <div class="image-upload-wrap" id="4"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload(this)" class="remove-image">Remove <span class="image-title">Uploaded Image</span> </button> </div> </div>