Question

我已经在这里看到了这个问题的答案，但是我所看到的一切都与我想要做的事情有些不同......我从移动表单中传递3个值，当我查看传递的数据时，一个数据不会通过，我得到这个错误。[object HTMLInputElement]其他数据显示正常.. id = companyName的输入类型是我收到错误的数据。这是我的HTML代码：

<div data-role="content">
<form>
    <div>
        <input id="title" type="text" placeholder="Job Title" />
    </div>
    <div>
        <input id="companyName" type="text" placeholder="Company Name" />
    </div>
    <div>
        <textarea id="note" placeholder="The description of your job"></textarea>
    </div>
    <div class="ui-grid-a">
        <input id="btnAddNote" type="button" value="Add Job" />
    </div>
</form>
<ul id="notesList" data-role="listview" data-inset="true">
    ``
    <li data-role="list-divider">Job List</li>
    <li id="noNotes">There are no jobs</li>
</ul>

这是我的javascript代码：

$(function () {

    // define the application
    var Notekeeper = {};

    (function (app) {

        // variable definitions go here
        var $title = $('#title');
        var $companyName = $('#companyName');
        var $note = $('#note');
        var $ul = $('#notesList');
        var li = '<li><a href="#pgNotesDetail?title=LINK">ID</a></li>';
        var notesHdr = '<li data-role="list-divider">Your Jobs (js)</li>';
        var noNotes = '<li id="noNotes">You have no jobs (js)</li>';

        app.init = function () {
            app.bindings();
            app.checkForStorage();
        }

        app.bindings = function () {
            // set up binding for form
            $('#btnAddNote').bind('click', function (e) {
                e.preventDefault();
                // save the note
                app.addNote(
                    $('#title').val(),
                    $('#note').val(),
                    $('#companyName').val()
                );
            });
            $('#notesList a').live('click', function (e) {
                e.preventDefault();
                var href = $(this)[0].href.match(/\?.*$/)[0];
                var title = href.replace(/^\?title=/, '');
                app.loadNote(title);
            });
            $('#btnDelete').live('click', function (e) {
                e.preventDefault();
                var key = $(this).data('href');
                app.deleteNote(key);
            });
        }

        app.loadNote = function (title) {
            // get notes
            var notes = app.getNotes();
            // lookup specific note
            var note = notes[title];
            var page = '<div data-role="page" data-url="details" data-add-back-btn="true">\
                            <div data-role="header">\
                                <h1>Job Details (js)</h1>\
                                <a id="btnDelete" href="" data-href="ID" data-role="button" class="ui-btn-right">Delete</a>\
                            </div>\
                            <div data-role="content"><h3>TITLE</h3><h4>COMPANYNAME</h4><p>NOTE</p></div>\
                        </div>';
            var newPage = $(page);
            //append it to the page container
            newPage.html(function (index, old) {
                return old
                    .replace(/ID/g, title)
                    .replace(/TITLE/g, title
                        .replace(/-/g, ' '))
                    .replace(/COMPANYNAME/g, companyName)
                    .replace(/NOTE/g, note)

            }).appendTo($.mobile.pageContainer);
            $.mobile.changePage(newPage);
        }

        app.addNote = function (title, note, companyName) {
            var notes = localStorage['Notekeeper'];
            if (notes == undefined || notes == '') {
                var notesObj = {};
            } else {
                var notesObj = JSON.parse(notes)
            }
            notesObj[title.replace(/ /g, '-')] = note;
            localStorage['Notekeeper'] = JSON.stringify(notesObj);
            // clear the three form fields
            $note.val('');
            $title.val('');
            $companyName.val('');
            //update the listview
            app.displayNotes();
        }

        app.getNotes = function () {
            // get notes
            var notes = localStorage['Notekeeper'];
            // convert notes from string to object
            return JSON.parse(notes);
        }

        app.displayNotes = function () {
            // get notes
            var notesObj = app.getNotes();
            // create an empty string to contain html
            var html = '';
            // loop over notes
            for (n in notesObj) {
                html += li.replace(/ID/g, n.replace(/-/g, ' ')).replace(/LINK/g, n);
            }
            $ul.html(notesHdr + html).listview('refresh');
        }

        app.deleteNote = function (key) {
            // get the notes from localStorage
            var notesObj = app.getNotes();
            // delete selected note
            delete notesObj[key];
            // write it back to localStorage
            localStorage['Notekeeper'] = JSON.stringify(notesObj);
            // return to the list of notes
            $.mobile.changePage('notekeeper.html');
            // restart the storage check
            app.checkForStorage();
        }

        app.checkForStorage = function () {
            // are there existing notes?
            if (localStorage['Notekeeper']) {
                // yes there are. pass them off to be displayed
                app.displayNotes();
            } else {
                // nope, just show the placeholder
                $ul.html(notesHdr + noNotes).listview('refresh');
            }
        }

        app.init();

    })(Notekeeper);
});

提前致谢..

Answer 1

这是因为这行代码

 .replace(/COMPANYNAME/g, companyName)

你没有在app.loadNote函数中设置companyName，所以它是从初始声明中使用的

var $companyName = $('#companyName');

并且在你的addNote中你根本没有使用companyName

Answer 2

问题是如何在localStorage中存储备注，以便companyName不会保留。我更改了addNote函数来存储所有内容：

notesObj[title.replace(/ /g, '-')] = {
    title: title,
    note: note,
    companyName: companyName
};

之后，您可以在companyName中使用loadNote：

newPage.html(function (index, old) {
    return old.replace(/ID/g, title)
        .replace(/TITLE/g, title.replace(/-/g, ' '))
        .replace(/COMPANYNAME/g, note.companyName)
        .replace(/NOTE/g, note.note)
})

修正了演示：http://jsfiddle.net/T99CB/

Answer 3

您的功能只接受标题......

app.loadNote = function (title) {

然后继续尝试使用从未传入的companyName：

.replace(/COMPANYNAME/g, companyName)

您需要修复app.loadNote，以便在公司名称为参数时接受公司名称。

通常这会导致空值，但您恰好使用的变量名称与元素的ID相同。有一个经常被忽略的“特性”，其中对具有ID或名称属性的每个元素的引用存储在具有相同名称的变量中的window对象上。因此，您的input id="companyName"实际上可以在window.companyName获得;这是您实际访问的变量变量。

使用javascript [object HTMLInputElement]传递值而不使用alert

3 个答案:

修正了演示：http://jsfiddle.net/T99CB/