如何链接附加标题？

我目前有一个编辑器，允许用户输入输入并将其输入保存在特定标题下。我有一个允许他们这样做的按钮，以及使用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>

来源

2016-08-01 cosmo

你可以一个onclick事件附加到标记。喜欢这个。

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

JS的

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时要小心。它假定您一次只编辑一个区域。

来源

2016-08-01 13:07:13 25r43q

如何链接附加标题？

回答

相关问题