当前位置：文江博客话题详情

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

发布于 2024-10-31 04:23:29 字数 285 浏览 4 评论 0原文

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

http://jsfiddle.net/pthjU/

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久隐师 2024-11-07 04:23:29

由于您想独立处理每个元素，因此可以在插件中通过执行 .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);
    });
};

你可以测试它这里

顺便说一句，从旧方法... this 已经是插件内的 jQuery 对象（注意我是如何调用 .each() 直接在其上），无需将其包装在另一个 jQuery 对象中（克隆它）。您确实需要将其包装在我的第二个示例内部循环中，因为在.each() 您指的是单个 DOM 元素，而不是 jQuery 对象。

Since you want to handle each element independently, you can do that in your plugin, by doing a .each() loop there, instead of this:

$.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;
}

It should be like 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

As an aside, from the old method...this is already a jQuery object inside a plugin (note how I'm calling .each() directly on it), there's no need to wrap it in another jQuery object (cloning it). You do need to wrap it in my second example inside the loop, since inside the .each() you're referring to individual DOM elements, not jQuery objects.

回复收藏 0 原文

梦在深巷 2024-11-07 04:23:29

添加 .each() 到

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

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

应该肯定有效。

艾伦

add .each() into

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

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

Should definately work.

Alan

回复收藏 0 原文

~没有更多了~