1

我是 jQuery 和 javascript 的新手，所以这似乎是一个微不足道的问题。我想使用在我创建的 html 页面中找到的DOM Outliner 代码。

我的html页面源码如下

<!DOCTYPE html>
<html>
<head>
    <h3>Dom Outlining</h3>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>      
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
        var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
        var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

        // Start outline:
        myDomOutline.start();

        // Stop outline (also stopped on escape/backspace/delete keys):
        myDomOutline.stop();
    });
    </script>
</head>
<body>
    <h1>My First Heading</h1>

    <p>My first paragraph.</p>
    <div class="first class">
        <p> This is a division.</p>
    </div>
</body>
</html>

但是，这似乎并没有根据需要选择和突出显示元素。有人可以告诉我我的代码中缺少什么吗？

4

3 回答 3

2

因为你一开始就停止突出显示

    $(document).ready(function() {
    var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
    var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

    // Start outline:
    myDomOutline.start();

    // Stop outline (also stopped on escape/backspace/delete keys):
    //myDomOutline.stop();
});

演示：Plunker

在理想的实现中，我在演示中添加了一个开始和停止按钮。

于 2013-06-13T05:15:08.393 回答
0

你只需要删除myDomOutline.stop();:)

 $(document).ready(function() {
        var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
        var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

        // Start outline:
        myDomOutline.start();

        // Stop outline (also stopped on escape/backspace/delete keys):
       // myDomOutline.stop();
    });

您正在启动它，然后几乎立即停止它 - 结果一无所获！

检查这里http://jsfiddle.net/vJYya/1/

于 2013-06-13T05:16:33.193 回答
0 
<html>
<head>
    <h3>Dom Outlining</h3>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>      
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
    <script>
        $(function() {
            var myDomOutline = DomOutline({ 
                onClick: function (element) { 
                    console.log('Clicked element:', element); 
                }
            });

            $('#start').click(function(){
                myDomOutline.start();
            });

            $('#stop').click(function(){
                myDomOutline.stop();
            });
        });
    </script>
</head>
<body>
    <input id="start" type="button" value="Start outline"/>
    <input id="stop" type="button" value="Stop outline"/>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>
    <div class="first class">
        <p> This is a division.</p>
    </div>
</body>
</html>
于 2013-06-13T05:38:37.873 回答