Question

我对编码和JavaScript很新，而且我遇到了问题。我正在创建一个任务列表，并希望能够单独删除每个任务。现在发生的事情是每个任务“删除”按钮都没有响应，除非它在底部。所以我可以从下往上删除，但这不是我想要的。如果有人可以查看我的代码，那将非常感激。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mobile Task Manager</title>

    <!--CSS-->
    <link rel="stylesheet" href="css/styles.css">
    <!--JQuery-->
    <script src="js/jquery.js"></script>
    </head>
    <body>

    <header>
        <div class="container">
            <h1>Mobile Task Manager</h1>
            <p>The better way to manage your stuff</p>
        </div><!--container-->
        </header>

        <div id="main">

        <form id="add_form">
            <input type="text" name="name" id="name" placeholder="Enter a task...">
            <input type="button" id="add_btn" value="Add">
        </form>
        <ul id="tasks">
        </ul>
        <input type="button" id="clear" value="Clear All Tasks">
        </div><!--main-->

    <footer>
        <p>Mobile Task Manager &copy; 2015</p>
    </footer>
    <!--Javascript-->
    <script src="js/script.js"></script>
    </body>
    </html>

    var taskList = JSON.parse(localStorage.getItem('tasks'));

$(document).ready(function(){
    //Set counter
    i=0;
    //check tasks
    if(localStorage.getItem('tasks')!=null){
        //Loop through tasks
        $.each(taskList, function(key, value){
            $('#tasks').prepend('<li>'+value.name+'<input type="checkbox"><input type="button" id="delete" value="Delete"></li>');
            i++;            
        });
    }

    $('#add_btn').on('click', function(){
        var name = $('#name').val();

        if(name == ''){
            alert('Please eneter a task');
        } else {
            var tasks = JSON.parse(localStorage.getItem('tasks'));
            //check tasks
            if(tasks == null){
                tasks = [];
            }

            var new_task = {
                'name':name
            }
            tasks.push(new_task);
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
        window.location.reload(true);
        return false;
    });

    //Mark task complete
    $('li input:checkbox').on('click', function(){
        var current = $(this).parent();
        $(current).toggleClass('complete');
    });

    //Delete one Task
    $('li input:button').on('click', function(){
        var item = $(this).parent();
        var taskName = $(item).text();
        for(var i = 0; i < taskList.length; i++){
            if(taskList[i].name == taskName){
                taskList.splice(i, 1);
            }
            localStorage.setItem('tasks', JSON.stringify(taskList));
            window.location.reload(true);
            return false;
        }
    });

    //Clear All tasks
    $('#clear').on('click', function(){
        localStorage.clear();
        window.location.reload(true);
    });

});

Answer 1

属性id必须是唯一的，如果有帮助，请在添加按钮时使用class。

试试这个

//Delete one Task
$('.delete').each(function() {
    var delBtn = $(this);
    delBtn.on('click', function(){
        var taskName = delBtn.parent().text();
        for(var i = 0; i < taskList.length; i++){
        if(taskList[i].name == taskName){
            taskList.splice(i, 1);
        }
        localStorage.setItem('tasks', JSON.stringify(taskList));
        window.location.reload(true);
        return false;
    }
});

希望这会引导您找到解决方案。

删除按钮无响应

1 个答案: