根据跨度文本值增加字体大小答案

【问题标题】：Increase font size based on span text value根据跨度文本值增加字体大小
【发布时间】：2013-12-16 02:26:26
【问题描述】：

我需要根据 span 中的值更改字体大小

类名中的数字并不总是相同

问题：使用 text() 我得到所有值 (50020)

我需要在某处使用 each() 和 $this。怎么样？

感谢

<span class="emo_vote-1">50</span>
<p>smth.</p>
<span class="emo_vote-2">0</span>
<p>smth.</p>
<span class="emo_vote-3">20</span>

jQuery

var voteNumberSpan = jQuery("span[class^=\"emo_vote\"]");
    var voteNumber = voteNumberSpan.text();
    //console.log(voteNumber);
    if (voteNumber <= 30) {
        voteNumberSpan.css("fontSize","10px")
    } else if(voteNumber == 50) {
        voteNumberSpan.css("fontSize","16px")
    } else  {
        voteNumberSpan.css("fontSize","24px")
    }
    //I tried also:
    //voteNumberSpan.each(function (i) {
        //var voteNumber = voteNumberSpan.text();   
        //if (voteNumber < 30) {
        //voteNumberSpan.css("fontSize","10px")
        //} else if(voteNumber == 50) {
        //voteNumberSpan.css("fontSize","16px")
        //} else  {
        //voteNumberSpan.css("fontSize","24px")
        //}
    //});

jsfiddle http://jsfiddle.net/lima_fil/5VTN4/2/

【问题讨论】：

而span中的“值”与元素的font-size有什么关系？

标签： javascript jquery html css

【解决方案1】：

http://jsfiddle.net/5VTN4/7/

    jQuery(document).ready(function(){

    jQuery("span[class^=\"emo_vote\"]").each(function(){
        var voteNumber = $(this).text();
    console.log(voteNumber);
    if (voteNumber <= 30) {
        $(this).css("fontSize","10px")
    } else if(voteNumber == 50) {
        $(this).css("fontSize","16px")
    } else  {
        $(this).css("fontSize","24px")
    }
    });
});

【讨论】：

【解决方案2】：

试试这个小提琴：http://jsfiddle.net/5VTN4/5/

它使用 each 方法并使用 tekst 值作为大小：

 jQuery(document).ready(function(){
     $("span[class^=\"emo_vote\"]").each(function(){
        alert($(this).text());
        $(this).css("fontSize", $(this).text() + "px")
     });
});

【讨论】：

谢谢，简单的解决方案。但我需要特定的字体大小，与跨度文本值无关。

【解决方案3】：

因为你有三个不同的类名，无论出于何种原因，我建议你添加一个通用的类名来关联 all 相关的span 元素，然后选择（因为如果以emo_vote 开头的类名没有出现在类列表中，那么使用attribute-starts-with 选择器很容易失败），也就是说我建议使用以下jQuery：

jQuery('span.emo-vote').css('font-size', function(){
    var s = parseInt($(this).text(), 10);
    if (s <= 30) {
        return '10px';
    }
    else if (s > 30 && s <= 50) {
        return '16px';
    }
    else {
        return '24px';
    }
});

加上以下HTML：

<span class="emo_vote-1 emo-vote">50</span>
<p>smth.</p>
<span class="emo_vote-2 emo-vote">0</span>
<p>smth.</p>
<span class="emo_vote-3 emo-vote">20</span>

JS Fiddle demo.

顺便说一句，没有必要使用each()，css()（如我在上面所示）采用一个匿名函数，它将遍历选择器返回的每个元素（其中$(this) 将与迭代运行的当前元素）。

参考资料：

css()。

【讨论】：

【解决方案4】：

试试这个方法：

定义字体大小范围：从 10px 到 24px。

为每个跨度设置速率。

<span class="emo_vote-1" data-i2="fontSize:[10,24],key:'k',rate:50" >50</span>
<p>smth.</p>
<span class="emo_vote-2" data-i2="key:'k',rate:0" >0</span>
<p>smth.</p>
<span class="emo_vote-3" data-i2="key:'k',rate:20">20</span>

见demo

【讨论】：