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(){....})