在多个元素上运行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函数..？

回答

相关问题