爲什麼這個簡單的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代碼不會改變字體大小

回答

相關問題