JQuery的待辦事項清單項目

每次我補充一下列表向下移動，我不知道這是否是因爲CSS或jQuery的，你可以做的項目名單看下面的代碼來檢查它，請幫助！它總是試圖與通過JQuery添加的新列表處於同一級別。

另外，當我做了一些驗證，以便當用戶什麼都不輸入它不會將它添加到列表中，這對週一工作，但所有其他日子，它不工作，即使我在script.js中使用標記

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(); 
     } 

    }); 
});

來源

2016-08-01 Mohammad Halawi

你有一份在線>？它總是更容易看到這個例子 –

不，但我可以給你的項目，再加上那是項目中的所有代碼 –

我現在上傳 –

執行以下操作：刪除顯示內嵌塊，更改邊距並添加float：left;

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

關於第二個問題請執行以下操作：

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

來源

2016-08-01 04:07:17 madalinivascu

謝謝你幫助第一個問題，但我有1更多，我需要確保當用戶按下輸入時不要將其添加到列表中，請檢查我的腳本。js代碼，這工作週一，但其餘的不是 –

@MohammadHalawi看到我的答案。 :) – BobRodes

也可以。在jQuery中做同樣的事情有太多的方法。 :) – BobRodes

我只是通過你的榜樣加強。只有你的第一個輸入框的工作原理的原因是因爲該行的：

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

$('input')返回所有的選擇相匹配的元素，這意味着所有的輸入框的數組。當您詢問val()時，您將獲得數組中第一個輸入框的值，即""，除非您在第一個輸入框中輸入內容。除非你在星期一，否則什麼都不會發生。

您需要獲取要輸入的輸入框。要做到這一點，你的行改成這樣：

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

e.target是事件，這是你在打字輸入框的目標

來源

2016-08-01 04:14:09 BobRodes

謝謝你解決了我的問題 –

JQuery的待辦事項清單項目

回答

相關問題