Question

我正在玩d3，我正在尝试编写一个非常简单的页面来展示我的d3示例以供将来参考。

基本上我的页面显示了d3代码的结果（在此实例中来自Mike Bostock的强制布局）然后在它下面。将相关的javascript嵌入到页面中以供参考。

我有一个简单的jQuery'.load'脚本来引入javascript函数，这很好用。而且，我正在使用highlight.js对已经拉入的代码进行语法格式化。这也有效。

目前我有两个按钮，一个用于加载脚本文本，另一个用于格式化。这很好用。

但是，我想让它在页面加载上完成所有工作。

我尝试将一个按钮中的两个脚本组合作为测试（如下所示），但语法突出显示不起作用。但语法按钮本身工作正常。

几乎就好像.load事件的DOM操作没有完成或者什么？

非常感谢任何帮助。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta source="http://codepen.io/planetoftheweb/pen/CdqcD">
    <link rel="stylesheet" href="../styles/style.css">

    <!-- jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Syntax highlighter references -->
    <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/googlecode.min.css">
    <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

    <!-- d3 script for this example -->
    <script type="text/javascript" src="JS/new_chart.js"></script>


    <title>Document</title>
    <style>
        body, .stage {
          background: white; 
        }
    </style>

    <script src="../d3.v3.js" charset="utf-8"></script>

    <script>
        function code() {
            show_code();
            format_text();
        }
        function show_code() {
            $('.code pre code').load('JS/new_chart.js');
            $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
        };
        function format_text() {

            $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
        };
    </script>

    </head>
    <body onload = "new_chart()">
    <div class = "page_title">
        <h1>D3 example</h1>
        <h2>Force layout</h2>
    </div>
    <div class = "chart" id ='chart'></div>
    <div class = "code">
        <button id="show_code" onclick="code();">show code</button>
        <button onclick="format_text();">format</button>
        <pre><code>

        </code></pre>
    </div>
</body>
</html>

Answer 1

您遇到的问题是因为加载是异步发生的，所以第一次调用语法高亮显示是在代码加载之前发生的。试试这个：

<div class="code">
    <button id="show_code">show code</button>
    <pre><code></code></pre>
</div>

$('#show_code').click(function() {
    var $codeContainer = $('pre code', $(this).closest('.code'));
    $codeContainer.load('JS/new_chart.js', function() {
        hljs.highlightBlock($codeContainer[0]);
    });        
});

请注意，突出显示器调用放在load的'callback'函数参数中。这意味着它将在load请求完成后执行。我还使得加载器在特定的.code块上工作，该块与被点击的按钮相关 - 以防万一你需要每页超过1个。

使用javascript onclick实现多个DOM操作功能

1 个答案: