Question

我是JavaScript的新手（当然还有jQuery），所以我正在寻求一些帮助...... 此JavaScript函数根据容器div更改字体大小。

我需要它适用于所有div（最终的某个类） - 但它只抓取第一个的信息，并根据那个调整大小。有什么想法吗？

不寻找复制/粘贴答案，我想要正确地解决这个问题。谢谢！

Answer 1

由于您希望独立处理每个元素，您可以在插件中执行此操作，方法是在其中执行.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对象。 / p>

Answer 2

将.each（）添加到

中

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

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

应该肯定有效。

艾伦

在多个元素上运行JavaScript函数..？

2 个答案: