CODEWITHSUNDEEP
javascriptjqueryhtml
Mizok.H
Mizok.H

Reputation: 463

Using $(this) in custom function and .ready(function(){})

I got some problems about using $(this) in a function which is able to get element font-size.

Here i tried 3 statements but only statement 1 works.

Since I didn't use the function "adjust_size" in statement 1, It's actually not what i want but just a try, I want to know what's wrong with statement 2 & 3 .

function adjust_size(){
	alert($(this).css('font-size'));
}
/*---------------statment 1-----------------*/
$(function(){
	$('.a').click(function(){
		alert($(this).css('font-size'));
	})
})
/*---------------statment 2-----------------*/
$(function(){
	$('.b').click(function(){
		adjust_size();
	})
})
/*---------------statment 3-----------------*/
$(function(){
	$('.c').ready(function(){
		alert($(this).css('font-size'));
	})
})
.a{
font-size:10vw;
color:blue;
}
.b{
font-size:10vw;
color:red;
}
.c{
font-size:10vw;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">hi there :D</div>
<div class="b">hi there :D</div>
<div class="c">hi there :D</div>

Upvotes: 0

Views: 70

Answers (3)

blex
blex

Reputation: 25634

In your second example, this is not the same in your event handler and in the adjust_size function. You can either explicitly bind it:

$('.b').click(function() {
   adjust_size.call(this);
});

or just let it bind itself:

$('.b').click(adjust_size);

In your third example, you misuse $.ready(). It's not very clear in the docs, but inside the callback, this will not refer to .c, but to document. You need to explicitly select it again:

$(document).ready(function() {
  alert($('.c').css('font-size'));
});

Full demo

function adjust_size() {
  alert($(this).css('font-size'));
}
/*---------------statment 1-----------------*/
$('.a').click(function() {
  alert($(this).css('font-size'));
});
/*---------------statment 2-----------------*/
$('.b').click(adjust_size);
/*---------------statment 3-----------------*/
$(document).ready(function() {
  alert($('.c').css('font-size'));
});
div{font-size:6vw;color:#00f}.b{color:red}.c{color:green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">hi there :D</div>
<div class="b">hi there :D</div>
<div class="c">hi there :D</div>

Upvotes: 2

aznoqmous
aznoqmous

Reputation: 121

The problem is that your this in adjust_size refer to adjust_size, and not to the element calling the function. In other word, you have to do this :

function adjust_size(elem){
  alert($(elem).css('font-size'));
}

$(function(){
  $('.b').click(function(){
      adjust_size(this);
  })
})

Upvotes: 2

S&#233;bastien S.
S&#233;bastien S.

Reputation: 1544

For statement 2, you need to pass this to the function :

function adjust_size(t){
    alert($(t).css('font-size'));
}

$(function(){
    $('.b').click(function(){
        adjust_size(this);
    })
})

For statement 3, the DOM is already ready() when the function is declared so the event ready you put on $('.c') gets never called.

Upvotes: 3

Related Questions