2017-03-26 27 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

相关问题