假象需求:给一个div 添加 3个 radio 按钮 ,并动态给这三个按钮添加事件,当点击某个按钮的同时还要根据 点击 元素的id 获取一个数据集合(一个对象或者数组),并显示数对应的数组内容
具体代码如下
页面内容
<body>
<div id="msg_slideshow" class="msg_slideshow">
</div>
</body>
<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>