如何链接附加的标题？答案

【问题标题】：How to link an appended title?如何链接附加的标题？
【发布时间】：2016-08-01 21:23:07
【问题描述】：

我目前有一个编辑器，允许用户输入输入并将他们的输入保存在特定标题下。我有一个按钮，允许他们这样做，以及使用 append child 将他们的标题名称添加到一个框（只是一个白色背景的 div）。

想知道如何链接这些标题，以便当他们单击一个标题时，分配给该标题的文本输入会显示在我的编辑器中？

Javascript：

    <!-- Function to save the user's input inside editor1 -->
    function saveEdits() {
        var editElem = document.getElementById("editor1");
        var userVersion = editElem.innerHTML;
        localStorage.userEdits = userVersion;

        //Get the title from the user
        var title = prompt("What would you like your title to be?");
        localStorage.setItem(title, editElem.innerHTML);

        //Asigning the titles input by the user to the key "titles"
        titles = localStorage.getItem("titles");

        if (titles == null){
            titles = [];
        }
        else {
            titles = JSON.parse(titles);
        }

        var obj;
        obj = {"titles": title};
        titles.push(obj);
        localStorage.setItem("titles",JSON.stringify(titles));

        //Save the editor contents to local storage based on title
        document.getElementById("update").innerHTML = "Edits saved!";
        var theDiv = document.getElementById("Contentable");
        var content = document.createTextNode(title);
        theDiv.appendChild(content);
        var br = document.createElement("br");
        theDiv.appendChild(br);

    }

    <!-- Function to check if the user has any saved input -->
    function checkEdits() {
        if(localStorage.userEdits != null)
        document.getElementById("editor1").innerHTML = localStorage.userEdits;
    }

    function loadEdits(title) {
        //load useredit for title from local storage
        var userEdits = localStorage.getItem(title);
        var editElem = document.getElementById("editor1");
        editElem.innerHTML = userEdits;
    }

HTML（编辑器）：

<!-- Editor 1 -->
    <div id="editor1" contenteditable="true" style="margin-left:30em">
    </div>
    <input id="savechanges" type="button" value="Save Changes" onclick="saveEdits()"/>
    <div id="update">Click to save your changes made</div>

【问题讨论】：

标签： javascript jquery html local-storage

【解决方案1】：

您可以将 onclick 事件附加到标记。像这样。

<div class="container>
<h2 class="title" onclick="edit(this)">
   EDITABLE CONTENT BELOW
</h2>
<div class="editable" onclick="edit(this)">
</div>

var activeParent;
function edit( element ){
    var title = element.parentNode.children[ 0 ].innerHTML;
    var content = element.parentNode.children[ 1 ].innerHTML;
    //do stuff with the markup
    activeParent = element.parentNode; 
}

这就是您可以获取内容并临时存储活动父项作为参考的方式。所以当你保存它是activeParent.children[ 1 ].innerHTML = editedContent。

编辑：由于所有这些都是相对引用，因此您可以根据需要使用任意多个。使用 activeParent 时要小心。它假定您一次只编辑一个区域。

【讨论】：