如何使多个div类元素的内容可编辑答案

【问题标题】：How to make the contents of multiple div class elements editable如何使多个div类元素的内容可编辑
【发布时间】：2014-11-23 07:24:52
【问题描述】：

我的目标是使多个 div 元素的内容可以使用所有相同的 div 类名或不同的类名进行编辑。我知道 contenteditable 属性，但我的问题是能够使用 java-script 保存它，以便在重新加载页面时，保存并显示编辑的内容。我一直在尝试按照本网站上的教程进行操作...

http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

到目前为止，我已将 java 脚本代码分离到一个名为 mailscript.js 的不同文件中我将文件包含在 html5 文件顶部附近，使用... 我也改了... document.getElementById 到... document.getElementsByClassName 在a 制作的Java 脚本文件中。我真的不知道从这里去哪里。简而言之，编辑无法保存。她是文件...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
      type="image/ico"
      href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
    <div id="header">
      <header><h1>Bison Mail</h1></header>
        </div>
    <hr>
    <br id="clearleft">

    <div id="leftcolumn">
    <hr>
            <ul class="navbar">
                        <li><a href="staffhome.html">Home</a></li>
            <li><a href="staffinfo.html">Packages</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="mailhome.html">Sign-Out</a></li>
            </ul>
    <hr>
    </div>

        <div id="rightcolumn">
            <div class="container">
                <div class="table-row">
                    <div class="heading">Name:</div>
                    <div class="name" contenteditable="true">Meshech Price</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date Received:</div>
                    <div class="dateRecieved" contenteditable="true">11/1/2014</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date of Pickup:</div>
                    <div class="dateOfPickup" contenteditable="true">None</div>
                </div>
                <div class="table-row">
                    <div class="heading">ID:</div>
                    <div class="ID" contenteditable="true">N/A</div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail:</div>
                    <div class="email" contenteditable="true"><address><a href="shackster3773@yahoo.com">shackster3773@yahoo.com</a></address></div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail Sent:</div>
                    <div class="emailSent" contenteditable="true">Sent</div>
                </div>
                <div class="table-row">
                    <div class="heading">Signature:</div>
                    <div class="signature" contenteditable="true">N/A</div>
                </div>
            </div>
            <hr>
        <input type="button" value="save my edits" onclick="saveEdits()"/>
        <input type="button" value="add package" onclick="addElement()"/>
        <br>
    <hr>
            <div id="footer">
        <br>
        <p>By: Meshech &copy;</p>
            </div>
        </div>



</div>    



</body>
</html>

对于java脚本文件

function saveEdits() {

//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;

//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";

}

function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}

任何帮助将不胜感激。提前致谢！

【问题讨论】：

也许你有充分的理由，但也许你应该看看 jQuery - 如果你正在做大量的 DOM 操作，它会为你节省很多时间。按类名获取元素列表很简单$('.editable')...
同意 jQuery，但是关于本地存储的所有学习都适用于任何一种情况
@Meshech 我删除了我的答案，因为我认为它对您没有帮助 - 我建议您阅读 w3schools 的 HTML、Javascript 和 CSS 学习教程部分 (w3schools.com) - 人们会抨击它，因为 w3school 有时会提供错误的信息，但教程很好 - 使用 MDN 作为绝对参考 (developer.mozilla.org)

标签： javascript html css class

【解决方案1】：

试试这个。您的 div 需要看起来像 <div id="name" class="edit" contenteditable="true">Meshech Price</div>

HTML

<div class="container">
        <div class="table-row">
            <div class="heading">Name:</div>
            <div id="name" class="edit" contenteditable="true">Meshech Price</div>
        </div>
        <div class="table-row">
            <div class="heading">Date Received:</div>
            <div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
        </div>

Javascript

function saveEdits() {
    var editElem = document.getElementsByClassName("edit");
    localStorage.userEdits = {}
    Array.prototype.forEach.call(editElem, function(e) {
            console.log(e.id)
            localStorage.setItem([e.id], e.innerHTML);
        });

    document.getElementsByClassName("update").innerHTML="Edits saved!";

}

function checkEdits() {

   if(localStorage.userEdits) {
      var editElem = document.getElementsByClassName("edit");
      Array.prototype.forEach.call(editElem, function(e) {
                console.log(e.id)
                e.innerHTML = localStorage.getItem(e.id);
            });
        }
}

【讨论】：

div 是否应该都有不同的 id 名称和不同的类名？
同一个类，不同的id