首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

展示添加删除的数量-20131124

2013-12-02 
显示添加删除的数量-20131124这是一段可以显示出ul里面的li的数量不论是添加还是删除都可以很好的展示出来

显示添加删除的数量-20131124
这是一段可以显示出ul里面的li的数量不论是添加还是删除都可以很好的展示出来,不会因为在后面juqery添加的进去的li没有事件而完成不了

主要是显示数量

他可以传入添加和删除里面,让的添加和删除以后的数量都能读取的到//首先定义一个函数让 function appendTag(){                //为了方便直接将指定ulclass里的li的读取的长度也就是数量定义好 var gg = $(".ss li").length;                 //这里做一个判断,因为在没有的时候显示出来的还是会有一个0在所以就判断一下当获得li数量等于0的时候那么显示出来的位置上就是null空不展示没有 if(gg == 0) { $(".inputAA").html(null);                 //否则 不是0的话就正常的展示出来他本来的数量 }else{ $(".inputAA").html(gg); }  }然后是添加这一段//定义个点击的事件,然后把需要创建的li和它的内容都写好通过append这个属性,是可以直接往页面中添加html代码,用这个把要需要的内容添加进入,在让添加后li数量发生变化后能让显示功能正常读取到所以把appedTag放在里面$(".chaungjian").click(function(){ $(".ss").append("<li>创建成功<p class='shan'>删除</p></li>"); appendTag(); });


最下面就是删除了

$(".shan").live('click', function() {
$(this).parent().remove("li");
appendTag();
});
这里有点不一样的就是添加了live属性方法附加的事件处理程序适用于匹配选择器的当前及未来的元素那么也就是说在后面添加进入的li里面通过这个属性也可以直接获得事件,然后可以删除,这边我是直接通过查询他的父类元素li然后通过this指定只删除当前的li不会出现在父类里出现多个li的问题
<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>$(document).ready(function(){$(".chaungjian").click(function(){ $(".ss").append("<li>创建成功<p class='shan'>删除</p></li>"); appendTag(); });  $(".shan").live('click', function() { $(this).parent().remove("li"); appendTag(); }); function appendTag(){ var gg = $(".ss li").length; if(gg == 0) { $(".inputAA").html(null); }else{ $(".inputAA").html(gg); }  } appendTag();});</script></head><body><p class="inputAA"></p><ul class="ss"><li>原始的1<p class="shan">删除</p></li><li>原始的2<p class="shan">删除</p></li></ul><div class="chaungjian">创建</div></body></html>

热点排行