javascript - Phonegap 应用程序未运行 javascript 元素-6ren

javascript - Phonegap 应用程序未运行 javascript 元素

转载作者：行者123 更新时间：2023-11-28 07:23:12

所以我有一个代码可以在 phonegap 中正常运行 css 和 html，但是 javascript 元素不起作用。例如，我正在制作一个待办事项应用程序，但该按钮不会保存我的新元素，也不会单击以删除。

CSS 代码

body
{
    font-family: Verdana, Arial;
    font-size: 18px;
    background-color:#D4D0B4;
}

h1
{
    background-color:#626b5e;
    font-size:1em;
    color:#F5F6F5;
    line-height:2em;
    text-align:center;

}

#newTaskInput, #addNewTask
{
    display:block;
    width:98%;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    background-color:#757769;
    border:0;
    height;2em;
    font-size:1em;
    color:#F5F6F5;
}

#taskList
{
    margin-top:10px;
}

#taskList > li
{
    background: -webkit-linear-gradient(#FFF, #F6F6F7);
    background: -o-linear-gradient(#FFF, #F6F6F7);
    background: -moz-linear-gradient(#FFF, #F6F6F7);
    background: linear-gradient(#FFF, #F6F6F7);
    border:1px solid #BBB6AF
    line-height:2em;
    color:#929292;
    margin-top:2px;
}

#taskList span
{
    margin-left:5px;
}

.done
{
    text-decoration:line-through;
    opacity:0.5;
}

HTML

<html>
    <head>
        <meta charset="utf-8" /> 
         <link rel="stylesheet" type="type/css" href="css/reset.css">
         <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Todo List</title>
    </head>
    <body>
        <h1>Todo List</h1>
        <div id="newTaskSection">
            <input type="text" id="newTaskInput" placeholder="New Task">
            <button id="addNewTask">Add</button>
        </div>
        <ul id="taskList">
        </ul>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>


    </body>
</html>

javascript

var taskList = new Array();


$( document ).ready(function(){
    var $newTaskInput = $('#newTaskInput');
    var $taskList = $('#taskList');
    var taskTouchStart;
    var taskTouchEnd;
    var taskTouchStartX;
    var taskTouchEndX;

    if( window.localStorage )
    {
        taskList = JSON.parse(window.localStorage.getItem('taskList'));
    }

    if(null !== taskList)
    {
        for(i=0;i<taskList.length;i++)
        {
            var newTask = '<li data-key="' + taskList[1].key + '"><span>' + taskList[i].task + '</span></li>';
            $taskList.append(newTask);
        }
    }

    else
    {
        taskList = new Array();
    }

    $('#addNewTask').on('click', function(){
        var key = Date.now();
        var newTask = '<li data-key="' + key + '"><span>' + $newTaskInput.val() + '</span></li>';
        $taskList.append( newTask );
        taskList.push({key:key, task:$newTaskInput.val(), done:false});
        if(window.localStorage)
        {
            window.localStorage.setItem('taskList', JSON.stringify(taskList));
        }
        $newTaskInput.val('');
    });

    $taskList.on('touchstart', 'li', function(e){
        var start = document.elementFromPoint( e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY);
        taskTouchStart = $(start).attr('data-key');
        taskTouchStartX = e.originalEvent.touches[0].pageX;
    });

    $taskList.on('touchend', 'li', function(e){
        var $end;
        var $this = $(this);
        var end = document.elementFromPoint( e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY);
        $end = $(end);
        taskTouchEnd = $end.attr('data-key');
        taskTouchEndX = e.originalEvent.touches[0].pageX;
        if(taskTouchStart == taskTouchEnd)
        {
            if(taskTouchStartX < taskTouchEndX)
            {
                if($this.hasClass('done'))
                {
                    $this.removeClass('done');
                }
                else
                {
                    $this.addClass('done');
                }
            }
            else
            {
                taskList = $.grep(taskList, function(e){ return e.key != taskTouchEnd;});
                if(window.localStorage)
                {
                window.localStorage.setItem('taskList', JSON.stringify(taskList));
                }
                $end.remove();
            }
        }

    });

});

最佳答案

下面代码中完成/未完成处理程序的简化形式，它将替换您当前的 on('touchstart.. 和 on('touchend... block 并消除很多复杂性:

此外，您有一个 1，您的显示 block 中应该有一个 i(除非我弄错了目的)，并且您没有为 localStorage 中标记为此类的任务设置完成类。

更改在下面的代码中注释，这将替换您在上面提出的 JS。

另外，抱歉，但我已经混合了 jQuery 和 vanilla JS，并且只得到了一个工作示例，您将不得不进一步验证哪些不是，希望这能让您继续前进。

$( document ).ready(function(){

    var $newTaskInput = $('#newTaskInput');
    var $taskList     = $('#taskList');

    if( window.localStorage ){
        taskList = JSON.parse(window.localStorage.getItem('taskList'));
    }

    if(null !== taskList){

        for(i=0;i<taskList.length;i++){

            // Should we add the 'done' class to these items?
            var newTaskClass = (taskList[i].done)? 'done': '';

            // taskList[1].key to taskList[i].key ??? or am I missing something?
            var newTask = '<li data-key="' + taskList[i].key + '" class="' + newTaskClass + '"><span>' + taskList[i].task + '</span></li>';
            $taskList.append(newTask);
        }
    }

    else {
        taskList = new Array();
    }

    $('#addNewTask').on('click', function(){
        var key = Date.now();
        var newTask = '<li data-key="' + key + '"><span>' + $newTaskInput.val() + '</span></li>';
        $taskList.append( newTask );
        taskList.push({key:key, task:$newTaskInput.val(), done:false});
        if(window.localStorage)
        {
            window.localStorage.setItem('taskList', JSON.stringify(taskList));
        }
        $newTaskInput.val('');
    });

    // Replaces the 'touchstart/end' handlers
    $(document).on('click', '#taskList li', function(e){

        var task = $(this);

        // Update the li class
        if (task.hasClass('done')){
            task.removeClass('done');
        } else {
            task.addClass('done');
        }

        // Find the item by its key property (assumes key exists / no duplicates)
        var itemToUpdate = taskList.filter(function(item){
            return item.key === task.data('key');
        })[0];

        // If true, make false, if false, make ture
        itemToUpdate.done = !itemToUpdate.done;

        // Over-write the task list in local storage
        window.localStorage.setItem('taskList', JSON.stringify(taskList));
    });
});