2017-03-26 25 views
0

我有適合文成一個div不管其長度的函數...兩個jQuery函數不能一起工作?

function fitin() { 
$('#fitin div').css('font-size', '1em'); 

while ($('#fitin div').height() > $('#fitin').height()) { 
    $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px"); 
} 

} 

和它的作品,什麼是原來寫在HTML,但是當我使用一個函數來替換文本

function getVerse() { 

var verses = ["this is one", "this is two"]; 
var index = 0; 
var verse = ""; 
$("#button2").click(function() { 

    $.getJSON("http://labs.bible.org/api/?passage=random&formatting=plain&type=json&callback=?", function(data) { 
    verse = JSON.stringify(data[0].text); 
     //alert(verse); 
    }); 
    if (index >= verses.length) { 
    index = 0; 
    } 
    $("#fitin").fadeOut(500, function() { 
    $(this).html("<b>" + verse + "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test" + "</b>").fadeIn(500); 
    fitin(); 
    index++; 
    }); 
}); 

} 

fitin()不起作用。這是鏈接到codepen here

回答

0

你的問題是在這裏:

(parseInt($('#fitin div').css('font-size')) 

$('#fitin div').css('font-size'))的結果就像50px一個字符串,它不能解析爲int。爲了解決這個問題,這樣做:

$('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size').replace("px", "")) - 1) + "px"); 

如果字符串是 '時間'(2em的)變化的數量replace("em", "")

+0

應該有'+「px」'在行的末尾將數字更改爲px。 – Hobgoblin8

+0

執行'parseInt'並添加值後,添加像素。 –

+0

我放了一行代碼。而你在另一個問題中提到了另一個問題。 @Dhiraj回答。 –

0

Here is a working pen。你有幾個問題。

首先,當您更新了經文中的文字時,您並未取代周圍的<div>,因此fitin()中的選擇器$('#fitin div')不再選擇任何內容。改變

$(this).html("<b>" + verse + "test ..." + "</b>").fadeIn(500); 

到:

$(this).html("<div><b>" + verse + "test ..." + "</b></div>").fadeIn(500); 

其次,雖然.html()函數是同步的,則瀏覽器重繪所花的時間要發生一個非零量。在重繪發生之前,您的fitin()函數將不起作用。有點哈克,但這是通過改變來解決的;

fitin(); 

要:

setTimeout(fitin, 0); 

第三,你的字體尺寸變更的代碼是不會正常工作,因爲它依賴於解析整數出與非數字字符的字符串,所以我修改了一個很少使它的工作:

function fitin() { 
    var initialSize = 16; 
    do { 
     $('#fitin div').css('font-size', initialSize + "px"); 
    } while (($('#fitin div').height() > $('#fitin').height()) && --initialSize) 
} 
+0

謝謝,它得到了它的工作。 – Hobgoblin8

相關問題