Question

我有一个正在处理的笔记应用程序。它看起来像Google Keep

它将每个笔记保存在本地存储中。

我想为每个笔记添加一个删除选项（类似于Keep），但不知道知道这样做。

完整的代码在我的Github页面https://github.com/oxhey/keep

上

HTML：

<!doctype html>
<html>
<head>
    <title>Notes</title>
    <link href="styles/normalize.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="window.css">
</head>
<script>

        var nw = require('nw.gui');
        var win = nw.Window.get();
        win.isMaximized = false;
    </script>

<body id="gui">
    <header class="app-header">
      <ul style="margin-top:0.3px">
    <li><a href='#' title='Close' id='windowControlClose'></a></li>
    <li><a href='#' title='Maximize' id='windowControlMaximize'></a></li>
    <li><a href='#' title='Minimize' id='windowControlMinimize'></a></li>
  </ul>

  <h2 style="margin-top: 10px;margin-left: 20px;color: #fff;">Notes</h2>

    </header>

    <section class="main-section">
        <article class="note add-note">
                <h1 class="note-title"></h1>
                <p class="note-content">Add a note</p>
        </article>
    </section>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

<script>


        // Min
        document.getElementById('windowControlMinimize').onclick = function()
        {
            win.minimize();
        };

        // Close
        document.getElementById('windowControlClose').onclick = function()
        {
            win.close();
            gui.App.closeAllWindows();
        };

        // Max
        document.getElementById('windowControlMaximize').onclick = function()
        {
            if (win.isMaximized)
                win.unmaximize();
            else
                win.maximize();
        };

        win.on('maximize', function(){
            win.isMaximized = true;
        });

        win.on('unmaximize', function(){
            win.isMaximized = false;
        });


    </script> 

</body>
</html>

Javascript：Main.js

    var Strings = {
    'en-us': {
        DEFAULT_TITLE: "Title",
        ADD_NOTE: "Add a note",
        SEARCH_PLACEHOLDER: "Search Jin's Keep"
    }
};

var Lang = Strings['en-us'];

var Keys = {
    ENTER: 10
}

var notes;



function Note(title, content, id) {
    Note.numInstances = (Note.numInstances || 0) + 1;
    this.id = id ? id : Note.numInstances
    this.title = title;
    this.content = content;
}

Note.prototype.render = function(index) {
        var elem = $('<article class="note" data-index="' + index + '"><h1 class="note-title">' + this.title + '</h1><p class="note-content">' + this.content + '</p></article>');
        $(".add-note").after(elem);
}

Note.prototype.toJSON = function() { 
    return {
        id: this.id,
        title: this.title,
        content: this.content
    };
}

function createNote() {
    var elem = $(".add-note");
    var title = elem.find(".note-title");
    var content = elem.find(".note-content");

    elem.removeClass("active");
    title.hide();

    if(title.text() != Lang.DEFAULT_TITLE || content.text() != Lang.ADD_NOTE) {
        var id = notes ? notes.length+1 : 1;
        var note = new Note(title.text(), content.text(), id);
        notes.push(note);
        note.render(notes.length-1);

        title.text(Lang.DEFAULT_TITLE);
        content.text(Lang.ADD_NOTE);
        saveNotes();
    }
}


function activateNote(note) {
    var title = note.find(".note-title");
    note.addClass("active");
    title.show();
    if(isEmpty(title.text())) {
        title.text(Lang.DEFAULT_TITLE);
    }
}

function saveCurrentNote() {
    var noteElement = $(".note.active");
    if(noteElement) {
        console.log("will save this element: ", noteElement[0]);
        var noteIndex = noteElement.attr("data-index");

        var note = notes[noteIndex];
        note.title = noteElement.find(".note-title").text();
        note.content = noteElement.find(".note-content").text();

        saveNotes();

        deactivateCurrentNote(noteElement);
    }
}

function deactivateCurrentNote(note) {
    note.removeClass("active");
    var title = note.find(".note-title");
    if(isEmpty(title.text()) || title.text() == Lang.DEFAULT_TITLE) {
        title.hide();
    }

    $(":focus").blur();
}

function isEmpty(string) {
    return string.replace(/\s|&nbsp;/g, '').length == 0;
}

function addTabIndex() {
    tabIndex = 3;
    $(".note .note-content, .note .note-title").each(function() {
        var el = $(this);
        el.attr("tabindex", tabIndex++);
    });
}


function loadNotes() {
    var rawObjects = JSON.parse(localStorage.getItem("notes"));
    if(rawObjects && rawObjects.length) {
        rawObjects.forEach(function(obj, index) {
            obj.__proto__ = Note.prototype;
            obj.render(index);
        });
        return rawObjects;  
    } else {
        console.warn("Couldn't load any note because local storage is empty.");
        return [];
    }
}

function saveNotes() {
    localStorage.setItem("notes", JSON.stringify(notes))
}


$(document).ready(function() {
    notes = loadNotes();
    addTabIndex();

    $(".note").each(function() {
        var note = $(this);
        var title = note.find(".note-title");
        if(isEmpty(title.text()) || title.text() == Lang.DEFAULT_TITLE  ) {
            title.hide();
        }
    });

    $(".main-section").on("click", ".note .note-content, .note .note-title", function(evt) {
        var note = $(this).parent();
        activateNote(note);
        //console.log('2 - Setting content editable to true', evt);
        var noteSection = $(this);
        noteSection.prop("contentEditable", true);
    });

    $(".main-section").on("click", ".note .note-title", function(evt) {
        //console.log("3 - Clearing TITLE's text");
        var title = $(this);
        if(title.text() == Lang.DEFAULT_TITLE) {
            title.text("");
        }
    });

    $(".main-section").on("click", ".note .note-content", function(evt) {
        //console.log('4 - Clearing CONTENT text', evt);
        var content = $(this);
        if(content.text() == Lang.ADD_NOTE) {
            content.text("");
            content.focus();
        }
    });

    $(".main-section").on("click", function(evt) {
        if(evt.target == this) {
            //console.log('5', evt);
            var currentNote = $(".note.active");
            if(currentNote.length) {
                //console.log('5.a');
                if(currentNote.hasClass("add-note")) {
                    console.log('5 - Creating a new note');
                    createNote();
                } else {
                    console.log('5 - Saving current note');
                    saveCurrentNote();  
                }

                if(currentNote.find(".note-title").text() == Lang.DEFAULT_TITLE) {
                    currentNote.find(".note-title").hide();
                }
            }
        } 
    });

    $(".main-section").on("keypress", ".note .note-content, .note .note-title", function(evt) {
        var currentNote = $(".note.active");
        console.log('6');
        if(evt.which == Keys.ENTER && evt.ctrlKey) {
            console.log('2');
            if(currentNote.hasClass("add-note")) {
                createNote();
            } else {
                saveCurrentNote();  
            }
        }
    });
});

谢谢

Answer 1

这样的东西？在删除按钮上使用数据属性，并将其作为参数传递给removeNote函数。

<强> HTML

<button class="delete" data-id="1">Delete note</button>

<强> JS

$(document).on('click', '.delete', function () {
  var id = $(this).data('id');
  removeNote(id);
});

function removeNote(id) {
  localStorage.removeItem(id);
}

从本地存储中删除特定项目

1 个答案: