Fatal编程技术网
  • javascript/
  • Javascript/HTML如何通过哈希引用div元素，获取其内容并将其内容粘贴到其他div？

Javascript/HTML如何通过哈希引用div元素，获取其内容并将其内容粘贴到其他div？

javascript html dom

Javascript/HTML如何通过哈希引用div元素，获取其内容并将其内容粘贴到其他div？,javascript,html,dom,Javascript,Html,Dom,所以我通常用Excel VBA编程，有时用C编程，对我来说javascript是不熟悉的，所以请原谅我，如果这很简单的话 我有一个html文档，我想随着时间的推移填充一些关于经济学的注释。在文档中，我还有一些使用JQuery treeview的javascript，这是我从Youtube教程中获得的。对我来说，要求所有内容都在一个文档中，这样部署就非常简单 HTML文档有一个树状视图部分，实际上有两个，但不要紧，一个主题查看器部分，我最终将其放置在右侧，一个所有主题的列表，它最初是隐藏的 在tr

所以我通常用Excel VBA编程，有时用C编程，对我来说javascript是不熟悉的，所以请原谅我，如果这很简单的话

我有一个html文档，我想随着时间的推移填充一些关于经济学的注释。在文档中，我还有一些使用JQuery treeview的javascript，这是我从Youtube教程中获得的。对我来说，要求所有内容都在一个文档中，这样部署就非常简单

HTML文档有一个树状视图部分，实际上有两个，但不要紧，一个主题查看器部分，我最终将其放置在右侧，一个所有主题的列表，它最初是隐藏的

在treeview中，我希望每个treeview节点都有一个指向所有主题部分中的div元素的锚引用。我是ID属性，因此可以使用相对引用语法散列。单击treeview节点时，我希望Javascript代码使用节点中的哈希搜索文档，并找到主题div。然后我希望获取主题内容innerhtml，并将它们粘贴到主题查看器的div内容innerhtml

所以我正在建立的是我的经济学笔记的一页维基百科

所以我想我离成功还有两行路要走。我被卡住了，因为我不知道如何遍历DOM，我尝试了一些处理XML时使用的XPATH类型语法，但在这里不起作用

我有困难，请帮我接电话，谢谢。代码见附件

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>One Page</title>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
    </script>
    <script>
        // Source code initially borrowed from this helpful chap Jiansen Lu http://www.youtube.com/watch?v=BZFkWDGyZBs
        $(function () {
            $('div.mytree div:has(div)').addClass('parent');
            $('div.mytree div').click(function () {
                var thistree = $(this);
                thistree.children('div').toggle();
                thistree.filter('.parent').toggleClass('expanded');

                // does the clicked link have an anchor
                var anchor = thistree.children('a');
                if (anchor.length > 0) {
                    // we got an anchor so grab id 
                    var topic = anchor[0].hash; // children('#href');

                    // and grab contents
                    //---GOT STUCK HERE
                    var topicContents = $('div.AllTopics div[@id="' + topic + '"]');

                    // paste contents to topic viewer div
                    //NOT WORKING $('div.TopicViewer').innerhtml = topicContents.innerhtml;
                }

                return false;
            });
        });


    </script>
    <style>
        div.mytree div {
            padding-left: 15px;
            background: transparent url(http://www3.telus.net/jianlu58/bullet.gif) no-repeat top left;
        }

            div.mytree div.parent div {
                display: none;
                cursor: default;
            }

            div.mytree div.parent {
                cursor: pointer;
                background: transparent url(http://www3.telus.net/jianlu58/plus.gif) no-repeat top left;
            }

            div.mytree div.expanded {
                background: transparent url(http://www3.telus.net/jianlu58/minus.gif) no-repeat top left;
            }
    </style>

</head>
<body>
    <div class="mytree" style="padding:22px;border:2px solid #ccc;width:10%;font-family:Arial;font-size:12px;">
        <div>
            Theory
            <div>Introduction</div>
            <div>
                Economics
                <div>
                    Economists
                    <div><a href="#Cantillon_Richard">Cantillon, R</a></div>
                    <div><a href="#Thornton_Henry">Thorton, H</a></div>
                </div>
                <div>
                    Schools
                    <div>Keynesian</div>
                    <div>Austrian</div>
                    <div>Marxian</div>
                </div>
                <div>
                    Journals
                    <div>American Economic Review</div>
                </div>
                <div>
                    Glossary
                    <div><a href="#CantillonEffect">Cantillon Effect</a></div>
                    <div>Ricardian Equivalence</div>
                </div>
            </div>
            <div>
                Finance
                <div>
                    Institutions
                    <div>
                        Public
                        <div>IMF</div>
                        <div>World Bank</div>
                        <div>BIS</div>
                        <div>WTO</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mytree" style="padding:22px;border:2px solid #ccc;width:10%;font-family:Arial;font-size:12px;">
        <div>
            Market Data
            <div>
                Static Data
                <div>Sources</div>
                <div>
                    Central Banks
                    <div>Bank of England</div>
                    <div>Federal Reserve</div>
                    <div>ECB</div>
                </div>
                <div>
                    Data Categories
                    <div>FX Rates</div>
                    <div>Interest Rates</div>
                    <div>Equities</div>
                    <div>Commodities</div>
                    <div>Wages</div>
                    <div>Inflation</div>
                </div>
            </div>
            <div>
                Dynamic Data
                <div>FX Rates</div>
                <div>Interest Rates</div>
                <div>Equities</div>
                <div>Commodities</div>
                <div>Wages</div>
                <div>Inflation</div>
            </div>
        </div>
    </div>

    <div class="topic_viewer" style="top:50px;padding:22px;border:2px solid #ccc;width:90%;font-family:Arial;font-size:12px;">
        Click on a topic on the left and this pane will be populated
    </div>

    <div class="AllTopics">
        <!-- in production we'll use display:none to hide all this content -->
        <div id="AustrianTheoryOfBusinessCycles">
            <h1>Austrian Theory Of Business Cycles</h1>
            <a href="https://www.imf.org/external/pubs/ft/wp/2002/wp0202.pdf">The Austrian Theory of Business Cycles: Old Lessons For Moden Economic Policy?</a>
        </div>


        <div id="Cantillon_Richard">
            <h1>Richard Cantillon</h1>
            <h2>1680-1815</h2>
            <a href="https://mises.org/books/paper_credit_thornton.pdf">An Enquiry into the Nature and Effects of the Paper Credit of Great Britain (written 1730 published 1755)</a>
            <a href="http://en.wikipedia.org/wiki/Richard_Cantillon">Richard Cantillon Wikipedia </a>
            <a href="http://mises.org/daily/4190">The Business Cycle Explained in 1755 - Richard Cantillon - Mises Daily</a>
            <a href=" #cantilloneffect">Cantillon Effect</a>
        </div>
        <div id="CantillonEffect">
            <h1>Cantillon Effects</h1>
            <a href="http://wiki.mises.org/wiki/Richard_Cantillon#Cantillon_effects">Cantillon effects are the real fundamental changes in resource allocation that result from changing relative prices between the time of the creation of new money and the full adjustment to the increase in supply.</a>
            <a href="http://www.zerohedge.com/news/guest-post-cantillon-effect">Guest Post: The Cantillon Effect | Zero Hedge</a>
        </div>
        <div id="Thornton_Henry">
            <h1>Henry Thornton</h1>
            <h2>1760-1815</h2>
            <a href="http://en.wikipedia.org/wiki/Henry_Thornton_%28reformer%29">Thornton_Henry Wikipedia </a>
        </div>
    </div>
</body>
</html>
使用jQuery，通过其ID获取div非常容易-只需执行$'my_ID'，这将为您提供此div的jQuery表示：

<div id="my_id">
一个非常有用的链接是：

这将告诉您有关jQuery选择器的所有信息。如果您了解XPath，您将很快学会如何使用jQuery访问DOM。

两件事。您可以使用jQuery attr语法，而不是使用锚点[0]放入原始DOM元素。您还应该在jQuery事件对象上使用jQuery的preventDefault方法，而不是返回false。最后，您可以使用html方法而不是innerHTML来获取内容：

$('.mytree div').click(function (e) { // 'e' is a jQuery event
  e.preventDefault(); // instead of return false

  var thistree = $(this);
  thistree.children('div').toggle();
  thistree.filter('.parent').toggleClass('expanded');

  var anchor = thistree.children('a');

  if (anchor.length > 0) {
    var topic = anchor.attr('href'); // instead of anchor[0].hash

    var topicContents = $(topic); // jquery ID selector
    $('div.TopicViewer').html( topicContents.html() );
  }
});
文件：

谢谢，这件事做了一些调整。我需要删除，因为结果是散列数的两倍。此外，我还必须编辑主题查看器div上的类名，使其与您的代码示例相匹配。好东西，谢谢。是的。更新了答案以删除该错误。我的错。此外，您还可以稍微缩短此代码。我没有在我的示例中使用它，因为它使解释更难阅读，但您可以这样做：contents=$anchor.attr'href'.html，然后是$'div.TopicViewer'.html contents 
<div id="dest_id"> 

$('#dest_id').html(
    $('#src_id').html()
)

$('.mytree div').click(function (e) { // 'e' is a jQuery event
  e.preventDefault(); // instead of return false

  var thistree = $(this);
  thistree.children('div').toggle();
  thistree.filter('.parent').toggleClass('expanded');

  var anchor = thistree.children('a');

  if (anchor.length > 0) {
    var topic = anchor.attr('href'); // instead of anchor[0].hash

    var topicContents = $(topic); // jquery ID selector
    $('div.TopicViewer').html( topicContents.html() );
  }
});