Question

我的目标

我正在填写带有动态内容的A4纸张（PDF）并需要根据需要制作多个页面

我的实施，到目前为止

我有一个高度固定的div（A4尺寸）。我想用动态内容填充它。如果div的内容太高，我想像第一个那样制作一个新的div（A4大小），并将第一个div中的内容传送到最后一个div，直到剩下的内容适合第一个div。如果第二个div上的内容为高，我将制作第三个div（A4大小）。

这是我的javascript。但是调用其中的一个函数会使浏览器挂起

function make_new_page(content_height ){
  if ((content_height) > 805){
   var page_count =  $('.wrapper').length
   var last_line = $('.line').last()
   $('#container').append('<div class="wrapper" id="wrapper' + page_count + '"></div>');
   $('#wrapper' + page_count - 1).remove(last_line)
   $('#wrapper' + page_count).append(last_line);
   var content_height = $('.content_height').height();
   make_new_page(content_height)
  }
}

var content_height = $('.content_height').height();
make_new_page(content_height)

Answer 1

您可能遇到了范围问题。在您的代码中，您全局声明content_height变量，然后将其传递给您的函数，以便它可以在本地使用它。然后，在您已经在本地使用它之后，您可以在函数中稍后再次重新声明content_height变量，此时您可以在整个时间内全局访问它。如果你不修复那些，谁知道浏览器将如何处理？不同的浏览器甚至可能以不同方式处

在您按照自己的方式进行此项工作之前，您的功能应该看起来更像这样：

function make_new_page(){
  if ( content_height > 805){
   var page_count =  $('.wrapper').length
   var last_line = $('.line').last();
   $('#container').append('<div class="wrapper" id="wrapper' + page_count + '"></div>');
   $('#wrapper' + page_count - 1).remove(last_line)
   $('#wrapper' + page_count).append(last_line);
   content_height = $('.content_height').height();
   make_new_page();
  }
}

var content_height = $('.content_height').height();
make_new_page();

循环使用javascript if语句，直到它不成立为止

1 个答案: