javascript - 一次将jQuery事件应用于一个类

我有多个图像与同一类，我想隐藏这些图像一旦文件上传到相应的文件。
jQuery公司

$(document).ready(function() {
 $('input[type=file]').change(function(){
  $(".hide").hide();
 });
});

HTML格式

<img class="hide" src="img1.png">
<label>Choose Image1</label>: <input type="file">

<img class="hide" src="img2.png">
<label>Choose Image2</label>: <input type="file">

如果我上载文件，此代码将隐藏所有图像。
如果我上传了文件，我只想隐藏img1等等。

最佳答案

假设每个文件行都位于不同的容器中，我建议使用jQuerysiblings()选择器或closest()和find()的组合。
兄弟实例：

$(document).ready(function() {
  $('input[type=file]').change(function() {
    $(this).siblings('.hide').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img class="hide" src="img1.png">
  <label>Choose Image1</label>: <input type="file">
</div>

<div>
  <img class="hide" src="img2.png">
  <label>Choose Image2</label>: <input type="file">
</div>

最近+查找示例：

$(document).ready(function() {
  $('input[type=file]').change(function() {
    $(this).closest('.row').find('.hide').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <img class="hide" src="img1.png">
  <div>
  <label>Choose Image1</label>: <input type="file">
  </div>
</div>

<div class="row">
  <img class="hide" src="img2.png">
  <div>
  <label>Choose Image2</label>: <input type="file">
  </div>
</div>

关于javascript - 一次将jQuery事件应用于一个类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49221127/