Question

我有多篇文章，但它们都需要适合同一个空间。字符数限制为140.我要做的是根据段落中的字符调整字体大小。因此，如果段落的字符较少，我希望字体大小变得更大＆amp;反之亦然。

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

目前正在发生的事情，它似乎占据了最后一个，因为所有段落的字体大小都是8em :(

非常感谢任何帮助＆amp;提前谢谢！

以下是代码：

    $(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会运行一次总共三十个，而不是依次处理每个段落。

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

根据字数统计Jquery设置字体大小

2 个答案: