动态创建元素并给元素添加带有回调函数的动态事件

最新推荐文章于 2019-12-06 20:15:51 发布

男儿当自强-

最新推荐文章于 2019-12-06 20:15:51 发布

阅读量1.9k

点赞数

分类专栏： javascript jquery 文章标签：回调函数

本文链接：https://blog.csdn.net/stamsuper/article/details/8990929

版权

javascript 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

jquery

15 篇文章 0 订阅

订阅专栏

假象需求：给一个div 添加 3个 radio 按钮，并动态给这三个按钮添加事件，当点击某个按钮的同时还要根据点击元素的id 获取一个数据集合(一个对象或者数组)，并显示数对应的数组内容

具体代码如下

页面内容

 <body>	
<div id="msg_slideshow" class="msg_slideshow">
			
</div>
</body>

主要的javascript代码如下

<script type="text/javascript">
var imgTypeControls=[{"id":"aaa","text":"aaa","name":"aaa"},{"id":"bbb","text":"bbb","name":"bbb"},{"id":"ccc","text":"ccc","name":"ccc"}]
var addImgTypeControl = function () {
	if (!imgTypeControls || imgTypeControls.length <= 0) return;

	var $imgTypeControl = $("<div></div>").attr({ "class": "imgTypeControl", "id": "imgTypeControl" });
	$('#msg_slideshow').append($imgTypeControl);
	var imgType = null;
	for (var i = 0; i < imgTypeControls.length; i++) {
		imgType = imgTypeControls[i];
		var imgTypeName=imgType.name;
		var tmpText=imgType.text;
		var radioId="imgType_"+(imgTypeName?imgTypeName:i+'');
		var radio=$("<input>").attr({"class":"imgType","id":radioId,"type":"radio","name":"imgType"});
		$(radio).bind("click",function (radio){
			var imgList=radioClickFun(this);
			if(!imgList||imgList.length<=0){return ;}
			reloadImageThumb(imgList);
		});
		var label=$("<label></label>").attr("for",radioId).html(imgType.text);
		$imgTypeControl.append(radio).append(label);
	}
}

var reloadImageThumb=function (imgList){
	for(var i=0;i<imgList.length;i++){
		alert(imgList[i]);
	}
}

var radioClickFun=function(obj){
	var id=obj.id;
	return getimgList(id);
}

var getimgList=function (id){
	var imgList=[];
	switch(id){
		case "imgType_aaa":
		imgList=["aa1","aa2","aa3"];
		break;
		case "imgType_bbb":
		imgList=["bb1","bb2","bb3"];
		break;
		case "imgType_ccc":
		imgList=["cc1","cc2","cc3"];
		break;
	}
	return imgList;
}

addImgTypeControl();
</script>

男儿当自强-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建元素并给元素添加带有回调函数的动态事件

假象需求：给一个div 添加 3个 radio 按钮，并动态给这三个按钮添加事件，当点击某个按钮的同时还要根据点击元素的id 获取一个数据集合(一个对象或者数组)，并显示数对应的数组内容具体代码如下页面内容主要的javascript代码如下var imgTypeControls=[{"id":"aaa","text"
复制链接

扫一扫

专栏目录