Jquery 动态添加dom后，再为其绑定事件

最新推荐文章于 2022-11-07 14:15:21 发布

boys1999

最新推荐文章于 2022-11-07 14:15:21 发布

阅读量815

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/boys1999/article/details/26103109

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <html xmlns="http://www.w3.org/1999/xhtml"> -->
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<link rel="stylesheet" href="style/.css" type="text/css" />
	<script src="scripts/jquery.js" type="text/javascript"></script>
	<script>
	//四要素
	var strPic="http://img04.taobaocdn.com/tfscom/i2/T15QseFKlbXXb1upjX_400x400.jpg,http://img04.taobaocdn.com/tfscom/i4/T1uGjVFLFbXXcuhVjX_400x400.jpg";
	var arrPic=strPic.split(",");
	var strTit="男装模板SDK_011,女装模板SDK_012,"
	var arrTit=strTit.split(",");
	
	$(function(){//等待dom加载完毕
		//插入dom
		for (var i=0;i<arrTit.length;i++){
			if (arrTit[i].length>0){ $(".left").append("<div class='list'>"+arrTit[i] +"</div>"); }
		}
		//绑定事件
		$.each($(".list"),function(index,val){
			//为每个list绑定事件
			$(this).click(function(){
					//处理列表list的css样式
					$(".list").css("background","#737373");
					$(".list").css("color","#f2f2f2");
					$(this).css("background","#505050");
					$(this).css("color","#ffffff");
					//处理图片
					$("img").attr("src",arrPic[index]);
					$(".right").slideUp(200);
					$(".right").slideDown(200);
			})
		})
		
	})
 
	</script>
</head>
<body>
<style>
.outer {width:570px; height:750px; border:solid 10px #d0d0d0; overflow:outo;  }
	.outer .left {width:170px; height:750px; background:#f0f0f0; float:left; display:inline; overflow-y:scroll; overflow-x:hidden; scrollbar-width:5px;   border:solid 1px #f2f2f2; }
		.outer .left .list {width:150px; height:30px;border-top:solid 1px #858585;  border-bottom:solid 1px #5d5d5d; background:#737373; font-size: 14px; color: #f2f2f2 ;line-height: 30px; text-align: center; font-family:'微软雅黑';  cursor:pointer;}
	.outer .right {width:384px; height:750px; float:left; display:inline; margin-left:10px;  background:#f0f0f0; }
		.outer .right .pic {width:394px; height:410px; overflow:hidden; margin-top:30px; margin-left:50px; }
		.outer .right .pic img {border:solid 5px #d0d0d0; }
		.outer .right .btns {width:384px; height:150px; overflow:hidden;  }
</style> 
	<div class="outer">
		<div class="left">
			<!-- 插入 -->
		</div> 
		<div class="right">
			<div class="pic"><img src="http://img04.taobaocdn.com/tfscom/i4/T1uGjVFLFbXXcuhVjX_400x400.jpg" ></img></div> 
			<div class="btns"></div> 
		</div> 
	</div>
	
</body>
</html>

boys1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 动态添加dom后，再为其绑定事件

--> //四要素 var strPic="http://img04.taobaocdn.com/tfscom/i2/T15QseFKlbXXb1upjX_400x400.jpg,http://img04.taobaocdn.com/tfscom/i4/T1uGjVFLFbXXcuhVjX_400x400.jpg"; var arrPic=strPic.sp
复制链接

扫一扫

专栏目录