javascript构造函数和原型实现封装，调用的结果为什么相同?
这是对应的css代码ul li{
list-style:none;
}
.downFont{
width: 220px;
height: 30px;
line-height: 30px;
background: #999999;
cursor: pointer;
}
.downFont1{
width: 220px;
height: 30px;
line-height: 30px;
background: #999999;
cursor: pointer;
}
.downFont2{
width: 220px;
height: 30px;
line-height: 30px;
background: #999999;
cursor: pointer;
}
/*底部弹窗显示*/
.iphone-a{
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(10,10,10,0.4);
bottom: 0;
}
.iphone-a1{
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(10,10,10,0.4);
bottom: 0;
}
.iphone-a2{
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(10,10,10,0.4);
bottom: 0;
}
.iphone-black{
display: block;
}
.iphone-b{
width: 100%;
height: 280px;
background: #fff;
position: fixed;
bottom: 0;
}
.iphone-c{
width: 100%;
height: 35px;
line-height: 35px;
}
.iphone-cancel{
float: left;
width: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #333333;
}
.iphone-confirm{
float: right;
width: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #333333;
}
.iphone-ul{
width: 100%;
height: 240px;
overflow: auto;
}
.iphone-li{
width: 100%;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: "microsoft yahei";
color: #333333;
padding-left: 12px;
}
这是html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
<link rel="stylesheet" href="downlist.css">
</head>
<body>
<div class="downlist">
<div class="downFont"></div>
<div class="iphone-a"></div>
</div>
<div class="downlist" style="margin-top: 20px">
<div class="downFont1"></div>
<div class="iphone-a1"></div>
</div>
</body>
<script src="jquery-2.2.2.min.js"></script>
<script>
function Downlist(obj){
_self=this;
_self.el=$(obj.el);
_self.dom1=$(obj.dom1);
_self.list={};
_self.list.data=obj.data||[];
_self.init();
}
Downlist.prototype={
constructor:Downlist,
init:function(){
var dom='<div class="iphone-b"><div class="iphone-c"><a class="iphone-cancel" href="javascript:;">cancel</a><a class="iphone-confirm" href="javascript:;">confirm</a><ul class="iphone-ul"></ul></div></div>';
_self.el.append(dom);
var data=_self.list.data;
for(var i=0;i<data.length;i++){
var lis='<li class="iphone-li">'+data[i]+'</li>'
_self.el.children(".iphone-b").find(".iphone-ul").append(lis);
}
_self.el.find(".iphone-li").click(function () {
_self.dom1.html($(this).html());
_self.el.removeClass('iphone-black');
})
},
open:function(){
_self.el.addClass('iphone-black');
}
}
var list1=new Downlist({
el:".iphone-a",
dom1:".downFont",
data: ['a','b','c','d'],
});
$(".downFont").on("click",function () {
list1.open();
});
var list2=new Downlist({
el:".iphone-a1",
dom1:".downFont1",
data: ['1','2','3','4'],
});
$(".downFont1").on("click",function () {
list2.open();
});
</script>
</html>
这个效果是在手机移动端，点击文本弹出下拉框，选中文本后把值给文本框，并关闭弹窗
现在遇到的问题的，点击文本1或文本2，弹出层里面都是list2中的数据。我想实现的最终效果是，点击文本框1，弹出list1的数据，点击文本框2，弹出list2中的数据，互不影响,并可以实现关闭和赋值效果。感谢大佬指点
