Todolist--[js practice of implementing memos]

Topic Requirements

On the basis of the provided HTML and CSS, complement the ToDoList's functional logic (which can be used with jQuery), with the following specific requirements:

1. Implement click the Add Task button, get the input box content, if the input box is not empty add a new task to the Task list function
2. When implementing the Click Task Item element, the task element is clicked if it has the class name "checked", then the class name "checked" is removed, otherwise the function of the class name "checked" is added.
3. Implementation click on the task item to the right of the delete button is, delete the corresponding task item function

  functionNewlitext (title) {return(     ' <li class= ' task > ' + ' <p lass= ' text ' > ' +title+ ' </p> ' + ' <span class= ' close ' > ' + ' x ' + ' </span > ' + ' </li> '     ); }  $(' #js-add-task '). On (' click ',function(){     varnewtext=$ (' #add-task-input '). Val (). Trim (); varNewli =Newlitext (NewText); $('. Todolist-content '). Append (Newli);  }); $('. Todolist-content '). On (' click ', '. Task ',function(){    $( This). Toggleclass (' checked ');  }); $('. Todolist-content '). On (' click ', '. Close ',function(){    var$task = $ ( This). parent (); $task. Remove (); });

The official answer idea:

• Get the elements you want, such as an input box, add a Task button, and more
• The template function is used here taskTpl to generate the HTML text for the task element.
• Using event delegates to bind task-related events
• Use the common method of jquery Toggleclass to implement class name switching
• Use the usual method of string trim to remove whitespace from the left and right sides of the string

The reference code is as follows:

var$addTaskInput = $ (' #add-task-input ');//Input Box Elementvar$jsAddTask = $ (' #js-add-task ');//Add Task buttonvar$content = $ ('. Todolist-content ');//Task content Elements/** * Task element HTML template function * @param [String] Title task title*/functionTasktpl (title) {return (    ' <li class= ' task ' > ' + ' <p lass= ' text ' > ' + title + ' </p> ' + ' <span class= ' close ' >x</span > ' + ' </li> ');}//to add a button binding event$jsAddTask. On (' click ',function() {  //Get input box contents, use trim to remove whitespace from left and right sides of string  varNewtasktitle =$addTaskInput. Val (). Trim (); if(Newtasktitle = = = ") {      return; }  varnewtaskhtml =Tasktpl (Newtasktitle); $content. Append (newtaskhtml);});//To bind a task element by using an event delegate Click event$content. On (' click ', '. Task ',function() {  //Toggle Class Checked$( This). Toggleclass (' checked ');});//use event delegate bindings to close button click events$content. On (' click ', '. Close ',function() {  //gets the parent element of the Close button task  var$task = $ ( This). parent (); //Remove task Elements$task. Remove ();}); Back to Practice

The following are additional explanations of the methods that are not too well understood.

• Toggleclass ()

More about Toggleclass (): http://api.jquery.com/toggleClass/

• Trim ()

More about Trim (): Https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

• Val ()

More about Val (): http://www.w3school.com.cn/jquery/attributes_val.asp

Todolist--[js practice of implementing memos]