jQuery $(this) 正确隐藏/显示元素

Question

如何正确使用 $ (this) 变量来隐藏元素？

任务是这样的：我有 2 个或更多输入带有用于上传 img 的类型文件。单击时，我必须隐藏输入并显示另一个 div。现在，当我单击时，会显示两个 div。

$(function() {
  $(".upload-img-item").hide();
  $(".screen-file").change(function() {
    if ($(this).find(".screen-file").val() != "") {
      console.log(this)
      $(".upload-img-item").show();
      $(".upload-screen").hide();
    } else {
      $(".upload-img-item").hide();
    }
  });
});

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 0.25rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="upload-img d-flex flex-wrap">

  <div class="col-6 ">
    <div class="card card-block bg-light border-1 upload-img-item">
      <div class="media card-body align-items-center d-flex" style=" padding: .5rem !important;">
        <img src="https://images4.alphacoders.com/936/thumb-1920-936378.jpg" class="align-self-center mr-3" alt="..." width="70" style="border-radius: .2rem;" id="upload-img2">
        <div class="media-body">
          <h6 class="mb-0">Screenshot-1.jpg</h6>
        </div>
        <button type="button" class="btn p-0"><i class="fas fa-times"></i></button>
      </div>
    </div>

    <div class="upload upload-screen">
      <label class="custom-file-upload">
        <div class="d-flex flex-column">
          <i class="fas fa-cloud-upload-alt"></i>
          <span class="upload-text">Upload image</span>
        </div>
        <input type='file' data-container="#upload-img2" class="input-upload-image screen-file" accept="image/*" />
      </label>
    </div>
  </div>

</div>

<div class="upload-img d-flex flex-wrap">

  <div class="col-6">
    <div class="card card-block bg-light  border-1  upload-img-item">
      <div class="media card-body align-items-center d-flex" style=" padding: .5rem !important;">
        <img src="https://root-nation.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2019/05/Wallpaper-Engine-01.jpg.webp" class="align-self-center mr-3" alt="..." width="70" style="border-radius: .2rem;" id="upload-img3">
        <div class="media-body">
          <h6 class="mb-0">Screenshot-1.jpg</h6>
        </div>
        <button type="button" class="btn p-0"><i class="fas fa-times"></i></button>
      </div>
    </div>

    <div class="upload upload-screen">
      <label class="custom-file-upload">
        <div class="d-flex flex-column">
          <i class="fas fa-cloud-upload-alt"></i>
          <span class="upload-text">Upload image</span>
        </div>
        <input type='file' data-container="#upload-img3" class="input-upload-image screen-file" accept="image/*" />
      </label>
    </div>
  </div>

</div>

Answer 1

看看这个

如果您需要预览，可以在Preview an image before it is uploaded 找到它。

$(function() {
  $(".upload-img-item").hide();
  $(".screen-file").on("change", function() {
    const filled = $(this).val() != ""; // boolean true or false
    const $container = $(this).closest(".upload-img"); // the closest common container
    $container.find(".upload-img-item").toggle(filled);
    $container.find(".upload-screen").toggle(!filled);
  });
  $(".upload-img-item button").on("click",function(e) {
    e.preventDefault();
    const $container = $(this).closest(".upload-img"); // the closest common container
    $container.find(".upload-img-item").hide();
    $container.find(".upload-screen").show();
  })
});

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 0.25rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="upload-img d-flex flex-wrap">

  <div class="col-6 ">
    <div class="card card-block bg-light border-1 upload-img-item">
      <div class="media card-body align-items-center d-flex" style=" padding: .5rem !important;">
        <img src="https://images4.alphacoders.com/936/thumb-1920-936378.jpg" class="align-self-center mr-3" alt="..." width="70" style="border-radius: .2rem;" id="upload-img2">
        <div class="media-body">
          <h6 class="mb-0">Screenshot-1.jpg</h6>
        </div>
        <button type="button" class="btn p-0"><i class="fas fa-times"></i></button>
      </div>
    </div>

    <div class="upload upload-screen">
      <label class="custom-file-upload">
        <div class="d-flex flex-column">
          <i class="fas fa-cloud-upload-alt"></i>
          <span class="upload-text">Upload image</span>
        </div>
        <input type='file' data-container="#upload-img2" class="input-upload-image screen-file" accept="image/*" />
      </label>
    </div>
  </div>

</div>

<div class="upload-img d-flex flex-wrap">

  <div class="col-6">
    <div class="card card-block bg-light  border-1  upload-img-item">
      <div class="media card-body align-items-center d-flex" style=" padding: .5rem !important;">
        <img src="https://root-nation.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2019/05/Wallpaper-Engine-01.jpg.webp" class="align-self-center mr-3" alt="..." width="70" style="border-radius: .2rem;" id="upload-img3">
        <div class="media-body">
          <h6 class="mb-0">Screenshot-1.jpg</h6>
        </div>
        <button type="button" class="btn p-0"><i class="fas fa-times"></i></button>
      </div>
    </div>

    <div class="upload upload-screen">
      <label class="custom-file-upload">
        <div class="d-flex flex-column">
          <i class="fas fa-cloud-upload-alt"></i>
          <span class="upload-text">Upload image</span>
        </div>
        <input type='file' data-container="#upload-img3" class="input-upload-image screen-file" accept="image/*" />
      </label>
    </div>
  </div>

</div>