jquery - 通过循环减小字体大小

Question

我有一个容器，它的宽度可以改变。有了这个容器，我还有其他几个元素：

HTML

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

在大多数情况下，我不需要对代码做任何事情，但有时 .box div 可能会更窄。在这些情况下，我需要调整 .sub1 容器的字体大小。

JS

 $('.sub2').each(function() {
    parentW = $('.sub2').parent().width(),
    sub_2 = $('.sub2').width() + 10,
    sub_1 = $('.sub1').width(),
    availSpace = parentW - sub_2;

    // below is where I need help 
    while (sub_1 > availSpace) {
       curFontSize = $('.sub_1').css('font-size');
       $('.sub_1').css('font-size', parseInt(curFontSize)-2);
    } 
 });

这似乎是正确的，但它似乎对我不起作用。我错过了什么？

Answer 1

你需要在$(this)里面使用.each()。此外，您需要访问和修改sub1每个 div sub2。

试试这个：

$(document).ready(function () {
    $('.sub2').each(function() {
        parentW = $(this).parent().width(),
        sub_2 = $(this).width() + 10,
        div1 = $(this).siblings('.sub1').first();
        sub_1 = div1.width(),
        availSpace = parentW - sub_2;

        if (sub_1 > availSpace) {
            curFontSize = div1.css('font-size');
            div1.css('font-size', parseInt(curFontSize)-2);
        } 
    });
});

Answer 2

您是否尝试过像这样更改字体大小值：

    $('.sub_1').css('font-size', '-=2');