在多個元素上運行JavaScript函數..？

我對JavaScript很陌生（當然還有jQuery），所以我正在尋求一些幫助... 這個JavaScript函數根據容器div改變字體大小。在多個元素上運行JavaScript函數..？

我需要它爲所有div工作（某一類的，最終） - 但它只是抓住從第一個的信息，並調整它們全部按那一個。有什麼想法？

不想複製/粘貼答案，我想正確地解決這個問題。謝謝！

2011-04-10 Harley

既然要獨立處理每一個元素，你可以在你的插件，做一個.each()環那裏，而不是這樣的：

$.fn.textfill = function(options) { 
    var fontSize = options.maxFontPixels; 
    var ourText = $('span', this); 
    var maxHeight = $(this).height(); 
    var maxWidth = $(this).width(); 
    var textHeight; 
    var textWidth; 
    do { 
     ourText.css('font-size', fontSize); 
     textHeight = ourText.height(); 
     textWidth = ourText.width(); 
     fontSize = fontSize - 1; 
    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3); 
    return this; 
}

它應該是這樣的：

$.fn.textfill = function(options) { 
    return this.each(function() { 
     var fontSize = options.maxFontPixels; 
     var ourText = $('span', this); 
     var maxHeight = $(this).height(); 
     var maxWidth = $(this).width(); 
     var textHeight; 
     var textWidth; 
     do { 
      ourText.css('font-size', fontSize); 
      textHeight = ourText.height(); 
      textWidth = ourText.width(); 
      fontSize = fontSize - 1; 
     } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3); 
    }); 
};

You can test it here

另外，從舊的方法... this已經是一個插件內的jQuery對象（請注意我如何直接調用.each()），不需要將它包裝在另一個jQuery對象中（克隆它）。你做需要把它包在我的第二個例子裏面循環，因爲在.each()你指的是單個DOM元素，而不是jQuery對象。

來源

2011-04-10 11:53:14

啊我現在看到，非常感謝。不幸的是，我太小白，在JsFiddle之外工作 - 我在$（window）.load之後調用函數，並且仔細檢查了包含jquery的內容...也許我錯過了其他的東西？：S – Harley 2011-04-10 12:30:01

哦，只是忘了爲段落設置頁邊距和填充爲0 =。= – Harley 2011-04-10 12:50:40

加。每（）到

$('.post').each().textfill({ maxFontPixels: 500 }); <--- not sure if this works.. but 

$('.post').each(function(){ 
    jQuery(this).textfill({ maxFontPixels: 500 }); 
});

應該肯定的工作。

艾倫

來源

2011-04-10 11:45:32

哈！這樣簡單，你建議的第二個是魅力。非常感謝。嬰兒的步驟;） – Harley 2011-04-10 11:50:05

在多個元素上運行JavaScript函數..？

回答

相關問題