根据字数设置字体大小Jquery

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‘的所有段落的字符数。例如，如果你有两个段落，一个有10个字符，另一个有20个字符，你的JS会运行一次，总共有30个字符，而不是依次处理每个段落。

Answer 2

使用.css函数如下所示。这样，它将根据每个p元素中的字符数更改每个p元素的字体大小

$(function(){         
    $(".question p").css('font-size',function(){
        var $numWords = $(this).text().length; // get length of text for current p element
        if (($numWords >= 1) && ($numWords < 20)) {
            return "2.2em";
        }
        else if (($numWords >= 20) && ($numWords < 60)) {
            return "1.8em";
        }
        else if (($numWords >= 60) && ($numWords < 100)) {
            return "1.2em";
        }
        else if (($numWords >= 100) && ($numWords < 140)) {
            return "0.9em";
        }
        else {
            return "0.8em";
        }           
    });    
});

FIDDLE