Question

Edit.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="js/edit.js"></script>
    <h3>Minimum 2 categories and minimum 20 items in order to publish the game <span class="label label-default"></span></h3>

    <input type="text" class="form-control"  placeholder="Enter game's name"  name="fname" id="fname">

    <button type="button" class="btn btn-primary" onclick="addNewCategory()">Add category</button>

    <br class="container">
        <div class="row">

            <div class="col-sm-3">
                <div class="card">
                    <div class="card-block" id="card1">
                        <button type="button" class="close" aria-label="Close" onclick="removeCategory(1)">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h4 class="card-title">Friends</h4>

                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Enter item" id="name1">
                            <span class="input-group-btn">
                                 <button type="button" class="btn btn-success btn-number"  onclick="addRow(1)" data-type="plus" data-field="quant[2]">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                            </span>
                        </div>

                        <ul class="list-group" id="mylistgroup1" >
                            <button class="list-group-item list-group-item-action"">Cras justo odio</button>
                            <button class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
                            <button class="list-group-item list-group-item-action">Morbi leo risus</button>
                            <button class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
                            <button class="list-group-item list-group-item-action">Vestibulum at eros</button>
                        </ul>

                        <button type="button" class="btn btn-primary" onclick="deleteRow(1)">delete</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card">
                    <!--Card content-->
                    <div class="card-block" id="card2">

                        <button type="button" class="close" aria-label="Close" onclick="removeCategory(2)">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <!--Title-->
                        <h4 class="card-title">Seinfeld</h4>
                        <!--Text-->
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Enter item" id="name2">
                            <span class="input-group-btn">
                                 <button type="button" class="btn btn-success btn-number" onclick="addRow(2)" data-type="plus" data-field="quant[2]">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                            </span>
                        </div>

                        <ul class="list-group" id="mylistgroup2">
                            <button class="list-group-item list-group-item-action">Cras justo odio</button>
                            <button class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
                            <button class="list-group-item list-group-item-action">Morbi leo risus</button>
                            <button class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
                            <button class="list-group-item list-group-item-action">Vestibulum at eros</button>
                        </ul>

                        <button type="button" class="btn btn-primary" onclick="deleteRow(2)">delete</button>
                    </div>
                    <!--/.Card content-->
                </div>
                <!--/.Card-->
            </div>

        </div> <!-- row -->
<body onload="loadLists()">
<div id="div1">

</div>

    <div><br> <br> </div>
        <button type="button" class="btn btn-primary" onclick="saveGame()">save</button>
        <button type="button" class="btn btn-primary" onclick="back()">back</button>
    </div> <!-- container -->
</body>
</head>


<body>

</body>
</html>

newCategory.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="js/newCategory.js"></script>


    <input type="text" class="form-control" placeholder="Category name" id="categoryName">
    <div class="col-sm-3">
    <div class="card" id="cardId">
        <div class="card-block">

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter item" id="name1">
                <span class="input-group-btn">
                                 <button type="button" class="btn btn-success btn-number"  onclick="addRow(1)" data-type="plus" data-field="quant[2]">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                            </span>
            </div>

            <ul class="list-group" id="mylistgroup1">
                <li id="li1" class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>

            <button type="button" class="btn btn-primary" onclick="saveCategory()">save category</button>
        </div>
    </div>
    </div>
</head>
<body>

</body>
</html>

如何将newCategory.html中新的类别的详细信息（categoryName和类别项）添加到Edit.html？

感谢您的帮助。提前谢谢。

newCategory.js：

/**
 * Created by Administrator on 04/04/2017.
 */
function addRow(id) {
    var listNum=$("#mylistgroup"+id);
    var text=document.getElementById("name"+id).value;
    $(listNum).append("<li class='list-group-item'>"+text+"</li>");

}

function saveCategory() {
    var getInput=document.getElementById("categoryName").value;
    var list=document.getElementById("mylistgroup1");

    var list_items=list.getElementsByTagName("li");
    var list3=new Array();

    for(var i=0;i<list_items.length;i++)
        list3.push(list_items[i].innerText);

    localStorage.setItem("storageName",getInput);
    localStorage.setItem("listgroup",JSON.stringify(list3));
    window.location.href = "Edit.html";
}

Edit.js：

/**
 * Created by Administrator on 03/04/2017.
 */
function loadLists(){
    var list_items=JSON.parse(localStorage.getItem("listgroup"));
    var categoryName=localStorage.getItem("storageName");
    
    var list3=new Array();
    var div=document.createElement("div");
    div.innerHTML=' <div class="col-sm-3">'+
    '<div class="card">'
        '<div class="card-block" id="card1">'
        '<button type="button" class="close" aria-label="Close" onclick="removeCategory(1)">'+
        '<span aria-hidden="true">&times;</span>'+
    '</button>'+

    '<h4 class="card-title" id="12">Friends</h4>'+

        '<div class="input-group">'+
        '<input type="text" class="form-control" placeholder="Enter item" id="name1">'+
        '<span class="input-group-btn">'+
        '<button type="button" class="btn btn-success btn-number"  onclick="addRow(1)" data-type="plus" data-field="quant[2]">'+
        '<span class="glyphicon glyphicon-plus"></span>'+
        '</button>'+
        '</span>'+
        '</div>'+

        '<ul class="list-group" id="mylistgroup1" >'+
        '<button class="list-group-item list-group-item-action"">Cras justo odio</button>'+
    '<button class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>'+
    '<button class="list-group-item list-group-item-action">Morbi leo risus</button>'+
    '<button class="list-group-item list-group-item-action">Porta ac consectetur ac</button>'+
    '<button class="list-group-item list-group-item-action">Vestibulum at eros</button>'+
    '</ul>'+

    '<button type="button" class="btn btn-primary" onclick="deleteRow(1)">delete</button>'+
        '</div>'+
        '</div>'+
        '</div>';
    
    document.appendChild(div);
    var element=document.getElementById("mylistgroup3");
    for(var i=0;i<list_items.length;i++)
    {
        var para=document.createElement("li");
        para.className="list-group-item";
        var node=document.createTextNode(list_items[i]);
        para.appendChild (node);
        element.appendChild(para);
    }
    document.getElementById("12").innerHTML=categoryName;
    
}
function addRow(id) {
    var listNum=$("#mylistgroup"+id);
    var text=document.getElementById("name"+id).value;
    $(listNum).append("<button class='list-group-item list-group-item-action'>"+text+"</button>");

}
function deleteRow(id)
{
    var listNum=("#mylistgroup"+id);
    $($(listNum+" button")[0]).remove();
}

function addNewCategory(){
    window.location.href = "newCategory.html";
}

function back()
{
    window.location.href = "createGame.html";
}
function saveGame()
{
    window.location.href = "createGame.html";

}
function removeCategory(id) {
    var categoryNum=$("#card"+id);
    categoryNum.remove();
}

Answer 1

您的HTML和JavaScript存在很多问题。以下是您需要注意的一些事项：

loadLists中的{p> edit.js有几个问题：

'<ul class="list-group" id="mylistgroup1" >'+

此<ul>应包含<li>元素，但包含<button>个元素。

var element=document.getElementById("mylistgroup3");

元素mylistgroup3不存在（在代码示例中。）

for(var i=0;i<list_items.length;i++)
{
    var para=document.createElement("li");
    para.className="list-group-item";
    var node=document.createTextNode(list_items[i]);
    element.appendChild(para);
}

未使用node变量，因此li元素为空。你可能想要：

for(var i=0;i<list_items.length;i++)
{
    var li=document.createElement("li");
    li.className="list-group-item";
    li.appendChild(document.createTextNode(list_items[i]));
    element.appendChild(li);
}

同样，edit.html中的HTML在两种情况下<button>和<ul>都错误地将id="mylistgroup1"嵌套在id="mylistgroup2"内

如何将列表组添加到html页面？

1 个答案: