Question

我正在创建一个jquery代码，一旦单击图像，每个图像都会消失。我正在使用相同的图像，但是当我点击它们时它并没有隐藏点击的图像而是从底部到顶部隐藏图像。

这是我的jQuery代码。

$(document).ready(function(){
    $('img').click(function(){
        $(this).hide();
    });

});

有什么想法吗？

Answer 1

它实际上是隐藏了点击的元素。

但是，它似乎是从下到上隐藏，因为当您单击顶部元素时，该元素将被隐藏，而较低元素在其位置向上滑动。

要向自己证明这一点，请尝试将title属性添加到图片

＆＃13;

    $(document).ready(function() {
      $('img').click(function() {
        $(this).hide();
      });

    });

＆＃13;

body {
  background-color: #e74c3c;
  font-family: 'Lato', sans-serif;
  font-weight: 300
}
#wrapper {
  width: 71%;
  margin: 0 auto;
}
img {
  border: 6px solid #f1c40f;
  margin: 20px 22px 0px 0px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
  <img src="http://goo.gl/CIHVmL" title="image 1" />
  <img src="http://goo.gl/CIHVmL" title="image 2" />
  <img src="http://goo.gl/CIHVmL" title="image 3" />
  <img src="http://goo.gl/CIHVmL" title="image 4" />
  <img src="http://goo.gl/CIHVmL" title="image 5" />
  <img src="http://goo.gl/CIHVmL" title="image 6" />
  <img src="http://goo.gl/CIHVmL" title="image 7" />
  <img src="http://goo.gl/CIHVmL" title="image 8" />
</section>

＆＃13;

Answer 2

$(document).ready(function(){
    $('img').click(function(){
        $(this).fadeOut();
    });
});

试试这个让你知道你的代码是否正常工作：）

Answer 3

Ouwh，您的代码正在运行。你没有看到，因为所有的图像是相同的。更改图像，您可以看到代码实际执行的操作。测试此代码。

＆＃13;

    $(document).ready(function() {
      $('img').click(function() {
        $(this).hide();
      });

    });

＆＃13;

body {
  background-color: #e74c3c;
  font-family: 'Lato', sans-serif;
  font-weight: 300
}
#wrapper {
  width: 71%;
  margin: 0 auto;
}
img {
  border: 6px solid #f1c40f;
  margin: 20px 22px 0px 0px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://goo.gl/CIHVmL" style="border:6px solid green" />
  <img src="http://goo.gl/CIHVmL" style="border:6px solid red" />
  <img src="http://goo.gl/CIHVmL" style="border:6px solid blue" />
  <img src="http://goo.gl/CIHVmL" />
  <img src="http://goo.gl/CIHVmL" />
  <img src="http://goo.gl/CIHVmL" />
  <img src="http://goo.gl/CIHVmL" />
  <img src="http://goo.gl/CIHVmL" />
</section>

＆＃13;

如何正确使用$（this）

3 个答案: