Question

我是jQuery和javascript的新手，所以这似乎是一个微不足道的问题。我想在我创建的html页面中使用找到here的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>

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

Answer 1

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

    $(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

在理想的实现中，我将在演示中添加一个启动和停止按钮。

Answer 2

您只需要删除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/

Answer 3

<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>

使用jQuery for Dom Outlining。

3 个答案: