javascript - prettyPrint() 只产生一次效果。（谷歌美化）

Question

我有这个 JavaScript（带有 jQ​​uery）：

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('.prettyprint').text(file_contents[key]);
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
            prettyPrint();
    });
});

// Variables have been set in code not shown, irrelevant to problem.
// prettyPrint() is called everytime the #viewFileModal is shown,
// but its effect is only felt once.

prettyPrint()每次显示 viewFileModal 模态框（由 Bootstrap 提供）时都会调用它，只是它似乎在每次页面加载时只产生一次效果。

prettyPrint()在使模态框出现后，我尝试在 JS 控制台中注释并输入。它确实只在第一次显示该框时（每页加载）才有效。

有任何想法吗？我一直坚持这一点。我也试过把电话打到prettyPrint()放在 viewFile 函数中；但效果是一样的。

非常感谢。

山姆。

Answer 1

在美化之后，调用“prettyPrint()”会在你的 PRE 标签中添加一个名为“prettyPrinted”的类。下面的行将删除页面上“prettyPrinted”类的所有实例，以便 prettyPrint() 函数可以重新美化您的 PRE 标签。这可以在不向 DIV 动态添加 PRE 标记的情况下完成。

$('.prettyprinted').removeClass('prettyprinted');

Answer 2

Joseph Poff 的答案是正确的，但你必须小心。prettPrint() 将所有内容包装在扫描标签中。如果你删除了 prettyprinted 类，你并没有删除扫描标签。除非您正在清除 pre 的内容（或剥离所有扫描标签），否则每次调用 prettyPrint() 时，您都将添加扫描标签，这将包装您的旧扫描标签。它可以很快失去控制。

Answer 3

感谢马太。解决办法是改成这样。也就是说，动态添加整个 pre 而不仅仅是文本。

var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
    $('#title-filename').text(filename);
    $('#fileblock').html('<pre class="prettyprint">' + file_contents[key] + '</pre>'); // fileblock is a div.
    $('#viewFileModal').modal('show');
}
$(document).ready(function() {
    $(document).on('shown', '#viewFileModal', function(event) {
        prettyPrint();
    });
});

:)