jquery如何隐藏被点击的单个html对象？

Question

我正在做W3Schools上的jquery教程。我出于好奇和学习而问，仅此而已。无业务应用程序。

我想单击一个HTML元素并仅使用一个函数将其隐藏。

我单击(h1，h2，p)，但在使用$(this)时，我似乎需要将标记本身传递给函数以隐藏它。

我试过了

$(*).click(function(){

但这隐藏了一切。我的代码是...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $([the HTML object I'm clicking on now]).click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

如果你点击我，我就会消失。

点击me away！

​

也点击我吧！

​

Answer 1

您必须引用要操作的对象，然后使用this关键字在指定(单击)的元素上应用函数。

​

$('.box, input, .btn').click(function() {
  $(this).hide();
});

.box {
  width: 50px;
  height: 50px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<input class='input'>
<button class='btn'>click</button>

​