實現備忘錄的todoList——[js練習]

題目要求

在提供的 HTML 和 CSS 的基礎上，補充todoList的功能邏輯 (可使用 jQuery)，具體要求如下：

1. 實現點擊添加任務按鈕時，獲取輸入框內容，如果輸入框不為空則添加一個新的任務到任務列表中的功能
2. 實現點擊任務 item 元素時，被點擊任務元素如果帶有類名 "checked"，則去除類名 "checked", 否則增加類名 "checked" 的功能
3. 實現點擊任務 item 右邊的刪除按鈕是，刪除相應的任務 item 的功能

 
 function newLiText(title){
     return(
     '<li class="task">'+'<p lass="text">'+title+'</p>'+'<span class="close">'+'x'+'</span>'+'</li>'
     );
 }
 
 $('#js-add-task').on('click',function(){
     var newText=$('#add-task-input').val().trim();
     var newLi = 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();
 });

 

官答思路：

• 獲取所需的元素，如輸入框，添加任務按鈕等
• 這里使用了模板函數 taskTpl 來生成任務元素的 HTML 文本
• 使用事件委托來綁定任務相關的事件
• 使用了jQuery 的 常用方法 toggleClass 來實現類名切換
• 使用了字符串的常用方法 trim 去除字符串左右兩邊的空格

參考代碼如下：

var $addTaskInput = $('#add-task-input'); // 輸入框元素
var $jsAddTask = $('#js-add-task'); // 添加任務按鈕
var $content = $('.todoList-content'); // 任務內容元素

/**
 * 任務元素 html 模板函數
 * @param [String] title 任務標題
 */
function taskTpl(title) {
  return (
    '<li class="task">'+
      '<p lass="text">' + title + '</p>'+
      '<span class="close">x</span>'+
    '</li>');
}

// 為添加按鈕綁定事件
$jsAddTask.on('click', function() {
  // 獲取輸入框內容,使用 trim 去除字符串左右兩端的空格
  var newTaskTitle = $addTaskInput.val().trim();
  if (newTaskTitle === '') {
      return;
  }
  var newTaskHtml = taskTpl(newTaskTitle);
  $content.append(newTaskHtml);
});

// 使用事件委托綁定任務元素點擊事件
$content.on('click', '.task', function() {
  // toggle class checked
  $(this).toggleClass('checked');
});

// 使用事件委托綁定關閉按鈕點擊事件
$content.on('click', '.close', function() {
  // 獲取關閉按鈕的父元素 task
  var $task = $(this).parent();
  // 去除任務元素
  $task.remove();
});
返回練習

關於里面用到的不是太懂的方法的補充說明如下

• toggleClass() 

更多關於toggleClass(): http://api.jquery.com/toggleClass/

 

• trim()

更多關於trim(): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

 

• val()

更多關於val(): http://www.w3school.com.cn/jquery/attributes_val.asp