jQuery函数调整

Question

我这个小功能head：

<script> 
    fontsize = function() { 
     var fontSize = $(".container").width() * 0.10; 
     $(".container #link").css('font-size', fontSize); 
    }; 
    $(document).ready(fontsize); 
</script> 

它的工作。在文档准备就绪。但是我也想要调整窗口大小。

我已经试过$(window).resize(fontsize);，什么都不会发生。

Answer 1

您的代码应该工作，但我们不能看到完整的代码，所以你可能公顷已将调整大小放置在不能看到您的功能的不同范围内。以下将避免该问题。

快捷键：使用一个窗口resize处理程序，但触发初始resize事件。

例如

<script> 
    $(window).resize(function() { 
     var fontSize = $(".container").width() * 0.10; 
     $(".container #link").css('font-size', fontSize); 
    }).trigger("resize"); 
</script> 

如果你的代码是不是在body元素的结束，你就说明它是在你head元素，你的代码也应该被包裹在文件准备处理，以确保选择不要失败。

<script> 
    $(function(){ 
     $(window).resize(function() { 
      var fontSize = $(".container").width() * 0.10; 
      $(".container #link").css('font-size', fontSize); 
     }).trigger("resize"); 
    }); 
</script> 

注：$(function(){ YOUR CODE });仅仅是$(document).ready(function(){ YOUR CODE });

的jsfiddle快捷方式：https://jsfiddle.net/TrueBlueAussie/6b7us88f/

Answer 2

尝试使用上页的方法准备：

fontsize = function() { 
     var fontSize = $(".container").width() * 0.10; 
     $(".container #link").css('font-size', fontSize); 
    }; 
    fontsize(); 
    $(window).on('resize',fontsize); 

https://jsfiddle.net/Lpgc0mmf/2/

Answer 3

试试这个代码，而不是：

<script> 
(function($) { 

    fontsize = function() { 
     var fontSize = $(".container").width() * 0.10; 
     $(".container #link").css('font-size', fontSize); 
    }; 

    fontsize(); 

    $(window).on('resize', function() { 
     fontsize(); 
    }); 

})(jQuery); 
</script> 

它利用jQuery中的on()处理程序，将其连接到窗户。回调函数将执行您的fontsize()函数。

下面是一个例子：https://jsfiddle.net/p0bw6f11/

Answer 4

需要配置准备在DOM事件

无论是在功能齐全使用它，或者它用附挂 '上'

jQuery(document).ready(function() { 
checkWidth(); 
$(window).resize(checkWidth); 
}); 

或

$(window).on('resize',function(){....})