Question

我在一个能够获得元素$(this)的函数中使用font-size时遇到了一些问题。

这里我尝试了3个语句，但只有语句1有用。

因为我没有使用＆＃34; adjust_size＆＃34;在声明1中，它实际上不是我想要的，只是一个尝试，我想知道声明2＆amp;的错误。 3。

＆＃13;

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'));
	})
})

＆＃13;

.a{
font-size:10vw;
color:blue;
}
.b{
font-size:10vw;
color:red;
}
.c{
font-size:10vw;
color:green;
}

＆＃13;

<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>

＆＃13;

Answer 1

对于语句2，您需要将this传递给函数：

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

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

对于语句3，当声明函数时，DOM已经ready()，因此永远不会调用放在ready上的事件$('.c')。

Answer 2

问题是adjust_size中的this是指adjust_size，而不是调用该函数的元素。换句话说，你必须这样做：

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

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

Answer 3

在您的第二个示例中，this在您的事件处理程序和adjust_size函数中不同。您可以显式绑定它：

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

或者让它自己绑定：

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

在您的第三个示例中，您滥用$.ready()。在docs中不是很清楚，但在回调中，this不会引用.c，而是引用document。您需要再次明确选择它：

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

完整演示

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>

在自定义函数和.ready（function（）{}中使用$（this）

3 个答案: