立即将jQuery事件应用于一个类

Question

我有多个具有相同类别的图像，我想在文件上传到相应的文件后隐藏这些图像。

的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，我只想隐藏Image1，等等。

Answer 1

您正在选择隐藏所有内容的班级。您应该查看prev()，它只选择具有给定类名的前一个元素。

  $(this).prev(".hide").hide();

$(document).rady(function() {
 $('input[type=file]').change(function(){
        $(this).prev(".hide").hide();

   });
});

Answer 2

您可以使用类hide获取所有以前的元素，然后从中获取第一个元素。 prevAll()

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="hide" src="img1.png">
<label>Choose Image1</label>: <input type="file">
<br>
<img class="hide" src="img2.png">
<label>Choose Image2</label>: <input type="file">
<br>
<img class="hide" src="img3.png">
<label>Choose Image3</label>: <input type="file">
<br>
<img class="hide" src="img4.png">
<label>Choose Image4</label>: <input type="file">

＆＃13;

＆＃13;

＆＃13;

Answer 3

假设您将每个文件行放在不同的容器中，我建议使用jQuery siblings()选择器或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>