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