addTodo 模型

<div id="arae1">  <input type="text"><input type="button" value="addTodo" id="addBtn">  <ul id="ul">    <li class="liActive">HTML</li>    <li class="liActive">CSS</li>    <li>js</li>    <li>node.js</li>  </ul>  SHOW: <span class="spanActive">all</span> <span>completed</span> <span>active</span></div>

#arae1{  padding-left:20px;  width: 350px;  margin: 0 auto;  float: left;}li{  list-style: inside;  cursor: pointer;}span{  text-decoration: underline;  cursor: pointer;}.spanActive{  color: black;  text-decoration: none;}.liActive{  text-decoration: line-through;}.isShow{  display: none;}

$(‘#addBtn‘).on(‘click‘,function(){  var addText  = $(‘input[type=text]‘).val();  if(addText!==‘‘){    $(‘<li></li>‘).html(addText).appendTo($(‘#ul‘));    $(‘#arae1 input[type=text]‘).val(‘‘);  }});$(‘#ul‘).on(‘click‘,‘li‘,function(){  $(this).toggleClass(‘liActive‘);});$(‘#arae1‘).on(‘click‘,‘span‘,function(){  var index = $(this).index();  // console.log(index);  $(‘#arae1 span‘).removeClass(‘spanActive‘);  $(this).addClass(‘spanActive‘);  if(index === 3){    $(‘#addBtn‘).removeAttr(‘disabled‘);    $(‘#ul li‘).removeClass(‘isShow‘);  }else if(index === 4){    $(‘#addBtn‘).attr("disabled", "disabled");    $(‘#ul li‘).each(function(){      $(this).removeClass(‘isShow‘);      if(!$(this).hasClass(‘liActive‘)){        // console.log(123);        $(this).addClass(‘isShow‘);      }    });  }else if(index === 5){    $(‘#addBtn‘).removeAttr(‘disabled‘);    $(‘#ul li‘).each(function(){      $(this).removeClass(‘isShow‘);      if($(this).hasClass(‘liActive‘)){        // console.log(123);        $(this).addClass(‘isShow‘);      }    });  }});