根据字数查询设置字体大小

Question

我有多篇文章，但都需要放在同一空间中。字符数限制为140个。我要执行的操作是根据段落中的字符调整字体大小。因此，如果段落中的字符较少，我希望字体大小变大，反之亦然。

我下面的代码似乎不起作用，并且想知道是否有人可以帮助我？

此刻正在发生的事情，似乎正在采取其他措施，因为所有段落的字体大小均为8em :(

非常感谢您的任何帮助并提前致谢！

这是代码：

    $(function(){
    var $quote = $(".question p");
    var $numWords = $quote.text().split("").length;     
    if (($numWords >= 1) && ($numWords < 20)) {
        $quote.css("font-size", "2.2em");
    }
    else if (($numWords >= 20) && ($numWords < 60)) {
        $quote.css("font-size", "1.8em");
    }
    else if (($numWords >= 60) && ($numWords < 100)) {
        $quote.css("font-size", "1.2em");
    }
    else if (($numWords >= 100) && ($numWords < 140)) {
        $quote.css("font-size", "0.9em");
    }
    else {
        $quote.css("font-size", "0.8em");
    }           
});

Answer 1

您的问题是您没有单独处理每个段落：请参阅http://jsfiddle.net/wkEMK/1/

$(function(){
    $(".question p").each(function () {
        var numChars = $(this).text().length;     
        if ((numChars >= 1) && (numChars < 20)) {
            $(this).css("font-size", "2.2em");
        }
        else if ((numChars >= 20) && (numChars < 60)) {
            $(this).css("font-size", "1.8em");
        }
        else if ((numChars >= 60) && (numChars < 100)) {
            $(this).css("font-size", "1.2em");
        }
        else if ((numChars >= 100) && (numChars < 140)) {
            $(this).css("font-size", "0.9em");
        }
        else {
            $(this).css("font-size", "0.8em");
        }           
    });
});

您的原始代码正在获取与“ .question p”匹配的所有段落的字符计数。例如，如果您有两个段落，一个段落有十个字符，另一个段落有二十个字符，那么您的JS将运行一次，总共三十个，而不是依次处理每个段落。