Question

我有一个函数可以将文本放入div中，无论其长度如何......

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的链接。

Answer 1

你的问题在这里：

(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");

如果字符串是一个数字，其中'em'（2em）更改为replace("em", "")

Answer 2

Here is a working pen。你有几个问题。

首先，当您更新诗句中的文字时，您没有替换它周围的<div>，因此$('#fitin div')中的选择器fitin()不再选择任何内容。改变

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

为：

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

其次，虽然.html()函数是同步的，但浏览器重绘会花费非零时间。在重绘之前，您的fitin()功能将无效。有点hacky，但这可以通过改变来解决;

fitin();

要：

setTimeout(fitin, 0);

第三，您的字体大小更改代码无法正常工作，因为它依赖于使用非数字字符解析字符串中的整数，因此我对其进行了一些修改以使其工作：

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

两个jQuery函数不能一起工作？

2 个答案: