调用用户定义的jQuery函数与$（这）选择

Question

我试图做一个函数隐藏圆点击时。

我想，我的语法是正确的，但是当我在圆上单击什么也不会发生。

我有以下代码：

function Disappearing() {
  $(this).hide();
}

$(".circle").click(function() {
  Disappearing();
})

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 5px;
}

#red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red" class="circle"></div>

Answer 1

除非你传递给函数，在换句话说Disappearing()点在事件函数当前对象this不能访问点击的对象，所以你应该得到$(this)在click事件，然后把它传递给Disappearing()。

尝试这个：

function Disappearing (circle) {
   circle.hide();
}
    		
$(".circle").click(function() {
	Disappearing($(this));		
});
 

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 5px;
}
#red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red" class="circle"></div>

Answer 2

使用参数传递的范围，以你的函数

function Disappearing(el) {
  $(el).hide()
}

$(".circle").click(function() {
  Disappearing(this)
})

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 5px;
}

#red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red" class="circle"></div>