Question

这是一个使用html css和jquery

的待办事项列表项目

每当我添加一些列表向下移动时，我不知道是不是因为css或jquery，你可以看下面的代码来查看它，请帮助!! 它总是试图与通过JQuery添加的新列表处于同一级别。

此外，当我进行一些验证时，当用户输入任何内容时它不会将其添加到列表中，这适用于星期一，但所有其他日子它都不起作用，即使我在script.js中使用了标签< / p>

http://mohammadhalawi.6te.net/To%20Do%20List/Index.html

如果你想查看它，我在网上上传了

HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JQuery MealPlaner</title>
    <link rel="stylesheet" type="text/css" href="Normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">

</head>

<body>
    <div class="container" id="todoListWrapper">
        <h1>The JQuery To Do List</h1>

        <div id="todoList" class="clearfix">
            <ul>
                <li  class="listTitle">Monday</li>
                <li class="addItem">
                    <input type="text" class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul >
                <li class="listTitle">Tuesday</li>
                <li class="addItem">
                    <input type="text" class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul >
                <li class="listTitle">Wednesday</li>
                <li class="addItem">
                    <input type="text" class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul >
                <li class="listTitle">Thursday</li>
                <li class="addItem">
                    <input type="text"  class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul>
                <li class="listTitle">Friday</li>
                <li class="addItem">
                    <input type="text" class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul>
                <li class="listTitle">Saturday</li>
                <li class="addItem">
                    <input type="text" class="inputItem" placeholder="add new item...">
                </li>
            </ul>
            <ul >
                <li class="listTitle" >Sunday</li>
                <li class="addItem">
                    <input type="text" placeholder="add new item...">
                </li>
            </ul>
        </div>
    </div>

    <div id="trash">
        Drop Here!
    </div>

    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script>
        window.jQuery || document.write('<script src="JQuery.js"><\/script>');
    </script>
    <script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
</body>

</html>

CSS

body
{
    background-color: darkgray;
}


#todoListWrapper
{
    width: 960px;
    text-align: center;
    margin: 0 auto; 
    padding: 20px 10px 30px;
    background: white;
}

.clearfix:after
{   
    content: "";
    display: table;
    clear: both;

}

#todoList ul
{
    width: 133px;
    margin: 0;
    padding:0;
    position: relative;
    display: inline-block;
    list-style: none;


}

#todoList li
{
    background: none;
    padding: 5px;
    border: none;
    margin: 0;
    text-align: left;
    font-size: 12px;
}

#todoList li:hover
{
    background: #eee;
}

#todoList li.listTitle
{
    background: #444;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 14px;



}

#todoList li.listTitle:hover,
#todoList li.listTitle:active
{
    cursor: default;
    transform: none;
}

#todoList .emptySpace
{
    background: #fc3;
    border: dashed 1px #777;
    height: 10px;
    width: 120px;
}

#todoList li.addItem
{
    display: none;
    position: absolute;
    top: 0;
    background: none;
    padding: 0;
    width: 111px;
    margin: 5px 4px;



}

#todoList ul:hover li.addItem
{
    display: block;
}

#todoList li.addItem input
{
    width: 100%;
    padding: 4px;


}

#todoList li.addItem :active
{
    transform: none;

}

#trash
{
    background: rgba(178,73,38,0.7);
    height: 300px;
    width: 400px;
    position: relative;
    top: 90px;
    left: 35%;
    line-height: 300px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 0;


}

SCRIPT

$(function()
 {  
    $('#todoList ul').sortable({
        items: "li:not('.listTitle, .addItem')",
        connectWith:"ul",
        dropOnEmpty:true,
        placeholder: "emptySpace"
    });
    $('input').keydown(function(e){

        if(e.keyCode == 13 && $('input').val()!="")
            {   
                 var item = $(this).val();
                 $(this).parent().parent().append('<li style="font-size:13px;cursor:pointer;display:block;">'+ item + '</li>'); 
                 $(this).val("");


            }



    });

    $('#trash').droppable({
        drop: function(event, ui)
        {
            ui.draggable.remove();
        }

    });
});

Answer 1

执行以下操作：删除显示内联块，更改边距并添加float：left;

#todoList ul {
 //display: inline-block;
 float:left;
 margin: 0 2px;
}

对于第二个问题，请执行以下操作：

if(e.keyCode == 13 && $(this).val().trim()!="")

Answer 2

我刚刚介绍了你的例子。只有你的第一个输入框工作的原因是因为这一行：

if(e.keyCode == 13 && $('input').val()!="")

$('input')返回与选择器匹配的所有元素的数组，表示所有输入框。当您要求val()时，您将获得数组中第一个输入框的值，即""，除非您在第一个输入框中输入内容。所以没有任何事情发生，除非你周一。

您需要输入您要输入的输入框。为此，请将您的行更改为：

if(e.keyCode == 13 && e.target.value != "")

e.target是该事件的目标，即您输入的输入框。

JQuery待办事项列表项目

2 个答案: