如果上一个为空，则隐藏下一个元素

Question

我有一些可以上传文件的盒子。一开始，我只想展示 1 个盒子。然后，当我上传图像时，第二个框会出现并显示出来。相反，当我删除图像时，该框必须隐藏。我能怎么做？以下是完整代码：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();

   隐藏上面的文件上传div。（在某些情况下）

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

FIDDLE DEMO

堆栈示例：

   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>