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

转载于:https://www.cnblogs.com/xingxing88/p/6060145.html