Question

我正在尝试编写一个CRUD应用程序。我在弄清楚如何编辑和删除单个项目时遇到了麻烦。对于创建的每个项目，我在<a>标记内制作两个<span>标记。一种用于编辑，另一种用于删除。但是我似乎无法弄清楚如何使他们做他们需要做的事情。此时，他们什么也不做，因为我无法弄清楚如何正确访问这些值。

注意-我才刚刚开始学习jQuery，因此，对此的任何专业提示都将受到赞赏。

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <form class='form'>
            <input id="input" type="text" placeholder="Type here..">
        </form>
        <h3>Notes</h3>  
        <ul></ul>
        <button id='clear'>Clear All</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

和javascript：

const app = {};

app.counter = (function(){
    var i = -1;
    return function(){
        i += 1;
        return i;
    }
})()

app.create = function(element){
    return document.createElement(element);
}

app.select = function(element){
    return document.querySelector(element);
}

app.makeList = function(text) {
    var i = app.counter();
    var li = app.create('li');

    var div = app.create('span');
    var edit = app.create('a');
    var del = app.create('a');

    li.textContent = text;

    edit.textContent = ' Edit';
    edit.href = '#'
    del.textContent = ' Delete';
    del.href = '#'

    div.appendChild(edit);
    div.appendChild(del);
    li.appendChild(div);
    ul.insertBefore(li, ul.childNodes[0])

    li.id = 'item' + i;
    del.id = 'delete' + i;
    edit.id = 'edit' + i;

}

// constants & variables

const ul = app.select('ul')
const input = app.select('input')
var notes;

$(document).ready(function(){

    if (localStorage.getItem('notes')) {
        notes = JSON.parse(localStorage.getItem('notes'));
    } else {
        notes = [];
    }

    localStorage.setItem('notes', JSON.stringify(notes));

    // build list items and display them on the page
    JSON.parse(localStorage.getItem('notes')).forEach(function(item){
        app.makeList(item);
    });

    // when form is submitted
    $('.form').submit(function(e){
        e.preventDefault();
        if (input.value.length > 0){
            notes.push(input.value);
            localStorage.setItem('notes', JSON.stringify(notes));
            app.makeList(input.value);
            input.value = "";
        }
    })

    // clear items on page and from local storage
    $('#clear').click(function(){
        if (window.confirm('This will clear all items.\nAre you sure you want to do this?')){
            localStorage.clear();
            while (ul.firstChild) {
                ul.removeChild(ul.firstChild)
            }
        }
    });

    $('ul').on('click', 'li', function(){
        console.log(this.textContent) // logs whatever is typed + Edit Delete
    })
});

Answer 1

做这样的事情。

  $("ul").on("click", "li", function(e) {
    console.log(this.textContent); // logs whatever is typed + Edit Delete
   if(e.target.id === "edit") {
     //edit
   } 
   if(e.target.id==="delete") {
     //delete
   }
    
  });

Answer 2

您正在尝试在元素准备就绪之前访问它们，这就是为什么您看不到任何东西的原因。

在全局级别上声明它们，但在文档准备好后为其赋值。

var ul;
        var input;
        var notes;

        $(document).ready(function () {

            ul = app.select('ul')
            input = app.select('input')
...Rest of your code
});

有关编辑和删除功能

当您在“编辑和删除”按钮中对ID进行定位时，您也需要对其进行解析

 $('ul').on('click', 'li', function (e) {

                if (e.target.id.includes('edit')) {
                    console.log(` item ${e.target.id.split('edit')[1]} needs to be edited.`)
                }
                if (e.target.id.includes('delete')) {
                    //delete
                }
            })

如何从CRUD应用程序编辑和删除单个项目

2 个答案: