<div id="box"></div>
<script>
$(function(){
$("#add").on("click",function(){
$("#box").append("<div><span>"+($("#box div").size()+1)+"</span><button>删除</button></div>")
})
$("#box").on("click","div button",function(){
$(this).parent().remove()
$("#box div span").each(function(i,e){
$(e).text(i+1)
})
})
})
</script>
$("ul.zhiList li").click(function(){$("ul.zhiList li").removeClass("zhistyle")
$(this).addClass("zhistyle")
$("div.zhifufangshi").css("display","none")
$("div.zhifufangshi").eq($(this).index()).css("display","block")
})
应当使用append()方法,因为html()方法用于设置内容时,会重写所有匹配元素的内容,因此会替换。
1、关于append()方法定义和用法:
append() 方法在被选元素的结尾插入指定内容。此外,如需在被选元素的开头插入内容,请使用 prepend() 方法。
2、语法:
$(selector).append(content,function(index,html))。
3、设计一个简单的html页面,存在一个div,和一个添加按钮。
4、设计简单的css样式:
5、此时的页面展示如下:
6、设计一个简单的select元素:
7、此时点击一次按钮,查看页面效果:
8、再次点击,如下出现两个select。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)