为什么这个简单的jQuery代码不会改变字体大小

这是我的jQuery代码。如果你看不到它的任何缺陷，请继续在这里看到JSfiddle在http://jsfiddle.net/J4ZgB/3/谢谢。为什么这个简单的jQuery代码不会改变字体大小

$(function(){ 
    $("#a").click(function(){ 
     var s=$('#p_content').css("font-size"); 
     s+=4; 
     $('#p_content').css("font-size",s+"px"); 
    }) 
})

来源

2011-11-17 LotusH

你有两个错误..固定码：

$(function(){ 
    $("#a").click(function(){ 
     var s = parseInt($('#p_content').css("font-size"), 10); 
     s += 4; 
     $('#p_content').css("font-size",s+"px"); 
    }) 
})

您需要解析字体大小的数字值，其中包含“px” - 幸运的是，parseInt将字符串中的第一个数字转换为数字，忽略字符串的其余部分。
您尝试设置元素的字体ID为p_cont（在jsFiddle中），而实际ID为p_content。

Updated jsFiddle。

来源

2011-11-17 08:27:55

因为s值"14px"所以"14px" + 4 + "px"是"14px4px"这不是有效的CSS。在把它看作一个数字之前，你必须从“14px”中解析数字。

你可以在这里看到：http://jsfiddle.net/jfriend00/J4ZgB/2/。只需点击您的链接并查看警报显示的内容。

您可以使用此：

$(function(){ 
    $("#a").click(function(){ 
     var item = $('#p_content'); 
     var s = parseInt(item.css("font-size"), 10); 
     s += 4; 
     item.css("font-size", s + "px"); 
    }) 
})

，你可以看到在这里工作：http://jsfiddle.net/jfriend00/J4ZgB/8/。我也将jQuery对象保存到本地变量中，而不是在同一代码块中运行两次选择器查询。

来源

2011-11-17 08:26:43 jfriend00

您可以简单地使用'parseInt（..，10）'而不是正则表达式。 – ThiefMaster

好吧，简化它。 – jfriend00

因为不敢你没有写你的#p_cont作为#p_content

$('#p_cont').css("font-size",s);

应该

$('#p_content').css("font-size",s);

而且我已经加入parseInt

var s=parseInt($('#p_content').css("font-size"));

演示：http://jsfiddle.net/J4ZgB/9/

总的结果：

HTML：

<span id="a">click to make font bigger</span> 
<div id="p_content"> 
Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML. ... 
</div>

脚本：

$(function(){ 
    $("#a").click(function(){ 
     var s=parseInt($('#p_content').css("font-size")); 
     s+=4; 
     $('#p_content').css("font-size",s); 
    }) 
})

来源

2011-11-17 08:27:07 Niels

'parseInt'很好吧 – ThiefMaster

试试这个：

$(function(){ 
    $('#a').click(function(){ 
     var s = parseInt($('#p_content').css("fontSize"), 10); 
     s += 4; 
     $('#p_content').css('fontSize', s+'px'); 
    }) 
})

来源

2011-11-17 08:28:18 ThiefMaster

来吧... @ShadowWizard的复制粘贴:) –

哈哈不，当我开始写我的时候，答案并不存在。 – ThiefMaster

这就是为什么我已经添加笑脸... :) –

当你找回你得到一个字符串返回当前字体大小：

var s = $('#p_content').css("font-size"); //Returns 14px

尝试当你解析整数值是：

var s = parseInt($('#p_content').css("font-size"));

第二个错误是，当您试图第二次获取它时，段落选择器字符串是错误的，它在哪里显示说#p_content它说#p_cont。

工作小提琴：http://jsfiddle.net/J4ZgB/11/

一般的建议是使用控制台登录多个检查一下是什么值你是从功能，以解决自己的脚本获得。

来源

2011-11-17 08:35:24

+1为一般建议，其余的已经出现在以前的答案中。 –

为什么这个简单的jQuery代码不会改变字体大小

回答

相关问题