我正在尝试使用JavaScript和jQuery创建一个简单的待办事项列表,主要功能之一是能够通过click事件在任何列表项(待处理或已完成)的两种状态之间切换。
这是页面的标记:
<body>
<div id = 'page'>
<h2>To Do Items</h2>
<form id = 'itemForm'>
<input type='text' id='itemDesc' placeholder='Add Item' />
<input type='submit' id = 'addBtn' value ='ADD' />
</form>
<ul>
<li class ='pending'>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
<script type="text/javascript" src='jquery-1.11.2.js'></script>
<script type="text/javascript" src='todoScriptjQuery.js'></script>
</body>
这是添加和切换功能的脚本:$(function(){/添加列表项/ var $ newItem = $('#itemDesc'); var $ itemForm = $('#itemForm'); var $ itemValue ;
$itemForm.on('submit', function (e){
e.preventDefault();
$itemValue = $('<li class = "pending">');
$itemValue.append($newItem.val());
$clear = $('<img class = "icon-invisible">');
$clear.attr('src', 'Images/png/clear.png');
$itemValue.append($clear);
$('ul').prepend($itemValue);
});
/*TOGGLE BETWEEN COMPLETE AND PENDING STATE*/
$('li').on('click', function(e){
var $target = e.target;
e.preventDefault();
switch($target.attr('class')) {
case 'pending':
doneItem($target);
break;
case 'completed':
revertItem($target);
break;
}
});
function doneItem($target) {
$target.attr('class', 'completed');
}
function revertItem($target) {
$target.attr('class', 'pending');
} });
我遇到的问题是,切换功能在控制台中记录了一个错误,说:Uncaught TypeError: undefined is not a function
switch语句开始的那一行。我添加了一个条件只是为了确认我的jQuery是否正确加载并且可以加载。因此,我对接下来的尝试感到迷茫。
任何指针都会有所帮助。谢谢
e.target
是DOM元素,而不是jQuery对象,因此没有attr()
方法,因此出现undefined
错误。您需要将其转换为jQuery对象:
var $target = $(e.target);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句