Question

我有这个函数根据它的scrollHeight是否大于175来调整div的大小。它工作得很好：

var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
    document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}

问题是有些生成的项目有助于div高度没有被考虑，还没有在脚本运行时加载，所以我把它放在一个（窗口）.load（function（） {...}）;像这样：

$(window).load(function() {
    var this_div = $('#content_' + <?php echo $counter ?>);
    var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
    if (this_div_height > 175) {
        document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
    }
});

...现在发生的事情是内容在页面上闪烁了一个纳秒，然后整个窗口只是白色。

Answer 1

您的问题是由您使用document.write()引起的。在页面完全加载并且整个文档已被解析之后，后续调用document.write() 会删除那里的任何内容。

您正在使用jQuery，因此您只需使用.append()添加新内容。

Answer 2

而不是取代页面上所有内容的document.write（），而是附加到正文：

var newsutff = $('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
$('body').append(newstuff);

（窗口）.load（function（）{...}）;使整个页面变白

2 个答案: