0

我正在玩 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>
4

1 回答 1

2

你遇到的问题是因为加载是异步发生的，所以第一次调用语法荧光笔是在加载代码之前发生的。尝试这个：

<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 的“回调”函数参数中。这意味着它将在load请求完成后执行。我还让加载程序在与.code单击的按钮相关的特定块上工作 - 以防万一您需要每页超过 1 个。

于 2013-08-09T09:45:58.270 回答