基於字數設置字體大小jquery

我有多篇文章，但他們都需要適合在同一個空間。字符被限制爲140.我要做的是根據我的段落中的字符調整字體大小。所以如果段落的字符少了，我想字體大小變大&反之亦然。基於字數設置字體大小jquery

我的下面的代碼似乎並沒有工作，並想知道如果有人能夠幫助我嗎？

發生了什麼事的那一刻，它似乎是走過去的東西，因爲所有段落的字體大小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"); 
    }   
});

來源

2013-02-14 dennisterrey

有一個插件爲此已:) :) https://gist.github.com/mekwall/1263939 – 2013-02-14 22:45:55

這不會解決你的問題，但你應該重新命名你的$ numWords變量，因爲你分裂時的數字字符「」，而不是文字。 – ChrisC 2013-02-14 22:48:59

嘿它似乎在這個小提琴工作正常> http://jsfiddle.net/u3fyu/ – dev 2013-02-14 22:50:56

你的問題是你不能單獨處理每個段落：看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會運行一次，共有三十個字符，而不是依次處理每個段落。

來源

2013-02-14 22:55:02 ChrisC

做這樣使用.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

來源

2013-02-14 22:58:18

謝謝！而已！！！ – dennisterrey 2013-02-14 23:04:08

基於字數設置字體大小jquery

回答

相關問題