Question

我已经做了一段时间的家庭作业，我被困了。

HTML文件

<html>
<head>
    <title>Web Storage Tester</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="screen" href="../../css/snippets.css" />
    <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../js/json2.js"></script>
    <script type="text/javascript" src="../../js/prowebapps.js"></script>
    <script type="text/javascript" src="webstorage-test.js"></script>
</head>
<body>
    <h1 class="fancy">&lt;Web Storage &gt; Web Storage JSON Wrapper</h1>
    <ul id="items">
        <li class="header">Items in Storage (tap to remove)</li>
    </ul>
    <ul id="newitem">
        <li class="header">New Item</li>
        <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
    </ul>
    <ul id="actions">
        <li><button id="add"> Add </button></li>
        <li><button id="clear">Clear</button></li>
    </ul>
</body>
</html>

JavaScript文件

$(document).ready(function() {
    // read the data from local storage for the items
    var items = PROWEBAPPS.Storage.get("listitems");
    var loadTicks = new Date().getTime();

    function displayItems() {
        loadTicks = new Date().getTime();

        $("#items li[class!='header']").remove();
        if (items) {
            // create list items to display the current items
            for (var ii = 0; ii < items.length; ii++) {
                var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
                $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
            } // for
        }
        else {
            $("#items").append("<li>No items</li>");

            // initialise the items array
            items = [];
        } // if..else
    } // displayItems


    $(document.getElementById.("#add")).addbutton(function(){
    //function addbutton(){
        alart("Added");
        items.push({
            title: $("#newtitle").val();
            created: new Date().getTime();
        });

        PROWEBAPPS.Storage.set("listitems", items);
        displayItems();
    });

    $("#clear").click(function() {
        alart("Clear");
        items = null;
        PROWEBAPPS.Storage.remove("listitems");
        displayItems();
    });

    displayItems();
});

我的按钮不起作用。我使用了书中的方法，从我在网上找到的方法，它仍然无法正常工作。我检查了源文件，因为我的CSS文件正常工作，所以它们是正确的。关于发生了什么的任何想法？

Answer 1

尝试替换

   $(document.getElementById.("#add")).addbutton(function(){
        ...
        });

与

$("#add").click(function(){
    ...
    });

Answer 2

检查fiddle

HTML 的

<h1 class="fancy">&lt;Web Storage &gt; Web Storage JSON Wrapper</h1>
    <ul id="items">
        <li class="header">Items in Storage (tap to remove)</li>
    </ul>
    <ul id="newitem">
        <li class="header">New Item</li>
        <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
    </ul>
    <ul id="actions">
        <li><button id="add"> Add </button></li>
        <li><button id="clear">Clear</button></li>
    </ul>

的jQuery

// read the data from local storage for the items

var items = [];
var loadTicks = new Date().getTime();

    function displayItems() {
        loadTicks = new Date().getTime();  
        //items =localStorage.getItem("listitems");
        items= JSON.parse(localStorage.getItem("listitems"));
        $("#items li[class!='header']").remove();
        if (items) {
            // create list items to display the current items
            for (var ii = 0; ii < items.length; ii++) {
            if(typeof items[ii].title !== 'undefined')
            {
                var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
                $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
            } // for
            }
        }
        else {
            $("#items").append("<li>No items</li>");
            items = [];
        } // if..else
    } // displayItems


    $("#add").click(function(){
        items.push({
            title: $("#newtitle").val(),
            created: new Date().getTime()
        });

        localStorage.setItem("listitems", JSON.stringify(items));
        displayItems();
        $("#newtitle").val('');
    });

    $("#clear").click(function() {
        alert("Clear");
        items.length = 0;
        localStorage.removeItem("listitems");
        displayItems();
    });

    displayItems();

无法将我的HTML ID链接到我的JavaScript按钮侦听器

2 个答案: