使用javascript onclick实现多个DOM操作函数

multiple DOM manipulation functions with javascript onclick

本文关键字：DOM 操作 函数 javascript onclick 实现 使用      更新时间：2023-09-26

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

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

<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]);
    });        
});

请注意，highlighter调用位于load的"callback"函数参数中。这意味着它将在load请求完成之后执行。我还让加载程序在与单击的按钮相关的特定.code块上工作，以防每页需要超过1个。

相关文章：