所以我有一个代码可以在 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));
});
});
关于javascript - Phonegap 应用程序未运行 javascript 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31975577/