CODEWITHSUNDEEP
jquerythis
Matthew Pepper
Matthew Pepper

Reputation: 13

Calling a user defined Jquery function with the $(this) selector

I am trying to make a function to hide the circle when it is clicked on.

I think my syntax is right but nothing happens when i click on the circle.

I have the following code:

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>

Upvotes: 1

Views: 35

Answers (2)

Aria
Aria

Reputation: 3844

Disappearing() can not access clicked object unless you passed it to that function, in the other words this point to current object in event function, so you should get $(this) in click event and then pass it to Disappearing() .

try this:

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>

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Pass the scope to your function using a parmameter

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>

Upvotes: 1

Related Questions