javascript - 如何在不重复多次的情况下重复使用此脚本？（相对于 div-size 脚本调整字体大小）

Question

我在网上找到了这段代码，它对我来说非常特别……但是，我需要它更特别一点……

此代码不适用于多个 div。我需要复制代码以使其工作并将类名 fmor newswrap 更改为 newsrap2 等等。这将导致像我这样的杂志网站有很多代码。

有人知道如何处理此代码以使其适用于多个 div 吗？

PS，目前我的 header.php 中有 15 个

$(document).ready(function() {
    var originalFontSize = 11.8;
    var sectionWidth = $('#newswrap8').width();

    $('#newswrap8 span').each(function(){
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
        $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/0.9 + "px"});
    });
});

这是我使用的 HTML 代码

<div style="width:300px;">
<h3 id="newswrap8" style="margin:0px; font-size:12px;">
<span>
<a href="http://www.thelink.no">This is the page title</a>
</span>
</h3>
</div>

Answer 1

没有 html-markup 很难测试，但想法是：

$(document).ready(function(){
    var originalFontSize = 11.8;
    $('[id^="newswrap"]').each(function(){
        var elm = $(this),
            sectionWidth = elm.width();

        elm.find('span').each(function(){
            var spanWidth = $(this).width();
            var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
            $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/0.9 + "px"});
        });
    });
});