这就是我想要做的事情:我有一个输入字段,可以用来将条目添加到待办事项列表中。在用户单击“添加”后,我使用 JQuery 显示条目的排序列表。我还使列表可排序(您可以使用 jQuery 通过鼠标拖动来更改顺序。)现在我想在双击单个列表项时将其加粗。不知何故,我没有让 jQuery 选择正确的项目......
这是我的代码。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Tadum</title>
</head>
<body>
<h2>Tadum - The ToDo List</h2>
<h3>Enter New ToDos</h3>
<form id="addForm">
<input type="text" name="ToDoListItem"></input>
</form>
<div id="button">Add!</div>
<h3>Your ToDos</h3>
<ol class="todolist"></ol>
</body>
</html>
CSS:
.todolist li{
font-weight: normal;
}
.todolist {
font-family:garamond;
color:#cc0000;
}
Javascript
$(document).ready(function() {
$('#button').click(function(){
var toAdd = $('input[name=ToDoListItem]').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#addForm')[0].reset();
});
$('ol').sortable();
$('ol').css('cursor', 'pointer');
$('.todolist li').dblclick(function(){
$(this).css('font-weight', 'bold');
});
});
笔记:
如果我将.list li
jQuery 和 CSS 样式表中的ol
. 然后双击显示列表中的所有项目(当然,这不是我想要的)。但不知何故,我无法弄清楚如何只选择<li>
用 jQuery 双击的个人......
(我还尝试了很多变体。例如,只使用“li”来选择双击的项目或使用“ol li”或“.item li”。它们都不起作用。)