4

我有多篇文章，但它们都需要放在同一个空间中。字符限制为 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");
    }           
});
4

2 回答 2

5

您的问题是您没有单独处理每个段落：请参阅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 个字符，而不是依次处理每个段落。

于 2013-02-14T22:55:02.863 回答
3

使用.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";
        }           
    });    
});

小提琴

于 2013-02-14T22:58:18.963 回答