为什么这个简单的jquery代码赢了'；不要改变字体大小

这是我的jquery代码。如果您看不到其中的任何缺陷，请继续在这里查看JSFIDLE，谢谢

---

因为

s

的值是

“14px”

所以

“14px”+4+“px”

是

“14px4px”

，这是无效的CSS。你必须先解析“14px”中的数字，然后才能将其视为一个数字

你可以在这里看到：。只需点击你的链接，看看警报显示了什么

您可以使用以下选项：

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

您可以在此处看到它的工作方式：

仅供参考，我还将jQuery对象保存到一个局部变量中，而不是在同一代码块中运行两次选择器查询。

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

应该是

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

我添加了

parseInt

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

演示：

总结果：

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);
    })
})

---

你犯了两个错误。。固定代码：

$(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\u cont

（在JSFIDLE中）的元素字体，而实际ID为

p\u content

.

试试这个：

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

---

检索当前字体大小时，返回一个字符串：

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

获取整数值时，请尝试分析该整数值：

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

第二个错误是，当您第二次尝试获取段落选择器字符串时，该字符串错误，应该是#p#content，它是#p#cont

工作小提琴：

---

一般建议更多地使用控制台日志记录，并检查从函数中获得的值，以便对自己的脚本进行故障排除。

c'mon。。。复制粘贴@ShadowWizard:）哈哈，不，当我开始写我的时，答案不在那里。这就是为什么我添加了微笑…：）您可以简单地使用

parseInt（..，10）

而不是regex.+1作为一般建议，其余内容已经出现在前面的答案中。

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