Question

这是我正在尝试做的事情：我有一个输入字段可用于将条目添加到待办事项列表。在用户单击“添加”后，我使用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，那么可行的方法是什么。然后双击显示列表中的所有项目（当然，这不是我想要的）。但不知怎的，我无法弄清楚如何只选择用jQuery双击的个体<li> ......

（我也尝试了很多变种。例如，只使用'li'选择doubleclicked项目或使用'ol li'或'.item li'。它们都不起作用。）

Answer 1

您需要将dblclick事件处理程序绑定到新添加的列表项，如下所示：

$(document).on('dblclick', '.todolist li', function(){
    $(this).css('font-weight', 'bold'); 
});

请注意，这不会切换样式，但只需双击即可使其变为粗体。如果再次双击它将无法执行任何操作。

此外，如果我建议您对JavaScript代码进行其他一些更改：您的表单通常可以像任何其他表单一样提交，无论如何都是为了此目的。我还为HTML <form>添加了一个标签，以便于访问。

$(document).ready(function() {
    $('#addForm').submit(function(e){
        e.preventDefault();

        $('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
        $(this)[0].reset();
    });

    $('ol').sortable().css('cursor', 'pointer');

    $(document).on('dblclick', '.todolist li', function() {
       $(this).css('font-weight', 'bold'); 
    });
});

HTML

<form id="addForm">
    <label for='ToDoListItem'>Item:</label>
    <input type="text" id="ToDoListItem" />
    <button type='submit'>Add!</button>
</form>

双击</li>后使用jQuery选择<li>项

1 个答案: