jQuery $(this) hide/show element correctly

Question

How can I properly use the $ (this) variable to hide an element?

The task is this: I have 2 or more inputs with a type file for upload img. On click I have to hide the input and show another div. Now, when I click, are show both divs.

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

mplungjan · Accepted Answer · 2020-07-24T13:08:31.687

Have a look at this

If you need a preview then Preview an image before it is uploaded is where to find it.

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

Thanks for feedback, but console give error (Error: Syntax error, unrecognized expression: ???) what i can add into coloset() ? — stepbystep, Jul 24 '20 at 11:29
Great ! thanks, but why do you add $(this).val() != ""; to constant ? — stepbystep, Jul 24 '20 at 11:33
I set the boolean constant filled to the result of the test that the field is filled — mplungjan, Jul 24 '20 at 11:34
Thank you very much, I will study your code, I became interested — stepbystep, Jul 24 '20 at 11:35
Thanks for the preview link, I have already made a preview before this ticket, everything works — stepbystep, Jul 24 '20 at 11:38
How can I make sure that when I click on X, it returns to its initial position? — stepbystep, Jul 24 '20 at 13:00

jQuery $(this) hide/show element correctly

1 Answers1