[英]Increase font size based on span text value
我需要根据跨度中的值更改字体大小
类名中的数字并不总是相同
问题:使用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")
//}
//});
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")
}
});
});
试试这个小提琴: http : //jsfiddle.net/5VTN4/5/
它使用每种方法并使用tekst值作为大小:
jQuery(document).ready(function(){
$("span[class^=\"emo_vote\"]").each(function(){
alert($(this).text());
$(this).css("fontSize", $(this).text() + "px")
});
});
因为你有三个不同的类名,无论出于何种原因,我建议你添加一个通用的类名来关联所有相关的span
元素,并选择那个(因为使用一个attribute-starts-with选择器很容易如果以emo_vote
开头的类名没有首先出现在类列表中,则失败,那表示我建议使用以下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小提琴演示 。
顺便说一句,没有必要使用each()
, css()
(正如我上面所示)采用一个匿名函数,它将迭代选择器返回的每个元素(其中$(this)
将与当前相关)迭代运行的元素)。
参考文献:
css()
。 试试这种方式:
设定每个跨度的速率。
<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>
见演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.