Phonegap 应用程序未运行 javascript 元素答案

【问题标题】：Phonegap App not Running javascript elementsPhonegap 应用程序未运行 javascript 元素
【发布时间】：2015-08-12 21:17:15
【问题描述】：

所以我有一个代码可以在 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();
            }
        }

    });

});

【问题讨论】：

标题中的真正意思是 Java 吧？
我现在没有发现错误，但 $( document ).ready(function(){ 触发了吗？我通常在行之间写下警报，以便知道它在哪里停止工作跨度>

标签： javascript html css cordova phonegap-build

【解决方案1】：

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

此外，您的显示块中有一个 1 ，其中应该有一个 i （除非我弄错了目的），并且您没有为 localStorage 中标记为此类的任务设置 done 类。

下面代码中注释的更改将替换您上面提出的 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));
    });
});

【讨论】：